提交图片、其他数据、词云的功能-liyuchen

This commit is contained in:
李宇辰 2023-04-13 19:32:15 +08:00
parent 7ea4fa8598
commit 5ab2446cb4
21 changed files with 2136 additions and 319 deletions

84
src/api/data/otherData.js Normal file
View File

@ -0,0 +1,84 @@
import request, {moduleName} from '/@/utils/request';
/**
* 查询上传数据对应的灾害分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getDisasterPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/otherData/queryDisasterPage',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 查询上传数据分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getOtherDataPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/otherData/pages',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 上传基础数据
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const uploadData = (data) => {
return request({
url: '/api/' + moduleName + '/ui/otherData/upload',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: data
});
};
/**
* 新增管理员
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const auditData = (data) => {
return request({
url: '/api/' + moduleName + '/ui/otherData/audit',
method: 'post',
data: data
});
};
/**
* 删除
* @param id
* @returns {Promise<AxiosResponse<any>>}
*/
export const deleteData = (id) => {
return request({
url: '/api/' + moduleName + '/ui/otherData/remove',
method: 'delete',
params:{
id
}
});
};

View File

@ -0,0 +1,74 @@
import request, {moduleName} from '/@/utils/request';
/**
* 查询上传数据对应的灾害分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getDisasterPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/queryDisasterPage',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 根据灾害id查询图片数据
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getPicturePage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/pictureInfo/page',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 上传基础数据
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const uploadData = (data) => {
return request({
url: '/api/' + moduleName + '/ui/pictureInfo/upload',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data'
},
data: data
});
};
/**
* 根据灾害id查询图片数据
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const delPicture = (id) => {
return request({
url: '/api/' + moduleName + '/ui/pictureInfo/remove',
method: 'delete',
params: {
id
}
});
};

104
src/api/data/visualData.js Normal file
View File

@ -0,0 +1,104 @@
import request, {moduleName} from '/@/utils/request';
/**
* 查询上传数据对应的灾害分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getDisasterPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/queryDisasterPage',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 根据灾害id查询词云分页
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getWordClouds = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/wordCloudPage',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 根据灾害id查询热点分页
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getHotspot = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/hotspotPages',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 上传基础数据
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const uploadData = (data) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/upload',
method: 'post',
data: data
});
};
/**
* 新增管理员
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const auditData = (data) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/audit',
method: 'post',
data: data
});
};
/**
* 根据灾害id查询图片数据
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const delData = (id,type) => {
return request({
url: '/api/' + moduleName + '/ui/visualData/remove',
method: 'delete',
params: {
id,
type
}
});
};

View File

@ -9,7 +9,7 @@ import request, {moduleName} from '/@/utils/request';
*/ */
export const getAdminManagerPage = (current,size,params) => { export const getAdminManagerPage = (current,size,params) => {
return request({ return request({
url: '/api/' + moduleName + '/adminManager/pages', url: '/api/' + moduleName + '/ui/adminManager/pages',
method: 'get', method: 'get',
params: { params: {
current, current,
@ -26,7 +26,7 @@ export const getAdminManagerPage = (current,size,params) => {
*/ */
export const auditData = (data) => { export const auditData = (data) => {
return request({ return request({
url: '/api/' + moduleName + '/adminManager/audit', url: '/api/' + moduleName + '/ui/adminManager/audit',
method: 'post', method: 'post',
data: data data: data
}); });
@ -35,7 +35,7 @@ export const auditData = (data) => {
export const remove = (ids) => { export const remove = (ids) => {
return request({ return request({
url: '/api/' + moduleName + '/administrator/delete', url: '/api/' + moduleName + '/ui/administrator/delete',
method: 'delete', method: 'delete',
params: { params: {
ids, ids,

View File

@ -9,7 +9,7 @@ import request, {moduleName} from '/@/utils/request';
*/ */
export const getAdminPage = (current,size,params) => { export const getAdminPage = (current,size,params) => {
return request({ return request({
url: '/api/' + moduleName + '/administrator/pages', url: '/api/' + moduleName + '/ui/administrator/pages',
method: 'get', method: 'get',
params: { params: {
current, current,
@ -26,7 +26,7 @@ export const getAdminPage = (current,size,params) => {
*/ */
export const addAdmin = (data) => { export const addAdmin = (data) => {
return request({ return request({
url: '/api/' + moduleName + '/administrator/add', url: '/api/' + moduleName + '/ui/administrator/add',
method: 'post', method: 'post',
data: data data: data
}); });

View File

@ -0,0 +1,53 @@
import request, {moduleName} from '/@/utils/request';
/**
* 查询上传数据对应的灾害分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getDisasterPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/dataUpload/queryDisasterPage',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 查询上传数据分页列表
* @param current
* @param size
* @param params
* @returns {Promise<AxiosResponse<any>>}
*/
export const getDataUploadPage = (current,size,params) => {
return request({
url: '/api/' + moduleName + '/ui/dataUpload/pages',
method: 'get',
params: {
current,
size,
...params
}
});
};
/**
* 新增管理员
* @param data
* @returns {Promise<AxiosResponse<any>>}
*/
export const auditData = (data) => {
return request({
url: '/api/' + moduleName + '/ui/dataUpload/audit',
method: 'post',
data: data
});
};

View File

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>

View File

@ -77,22 +77,6 @@ export const dynamicRoutes = [
zh: '用户响应管理', zh: '用户响应管理',
}, },
}, },
{
path: '/responseManagement/administrator',
name: 'administrator-management',
component: () => import('/@/views/responseManagement/administrator/index.vue'),
meta: {
title: 'Administrator management',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
icon: 'ele-ColdDrink',
zh: '管理员管理',
},
},
{ {
path: '/responseManagement/dataUpload', path: '/responseManagement/dataUpload',
name: 'data-upload-management', name: 'data-upload-management',
@ -176,6 +160,38 @@ export const dynamicRoutes = [
zh: '其他数据服务', zh: '其他数据服务',
}, },
}, },
{
path: '/dataService/visualData',
name: 'visualData',
component: () => import('/@/views/dataService/visualData/index.vue'),
meta: {
title: 'visual data service',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
icon: 'ele-ColdDrink',
zh: '其他数据服务',
},
},
{
path: '/dataService/pictureInfo',
name: 'pictureInfo',
component: () => import('/@/views/dataService/pictureInfo/index.vue'),
meta: {
title: 'picture info service',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
icon: 'ele-ColdDrink',
zh: '其他数据服务',
},
},
], ],
}, },
{ {
@ -195,6 +211,22 @@ export const dynamicRoutes = [
zh: '系统管理', zh: '系统管理',
}, },
children: [ children: [
{
path: '/systemManagement/chief/administrator',
name: 'chief-administrator-management',
component: () => import('/@/views/systemManagement/chiefAdministrator/index.vue'),
meta: {
title: 'Chief Administrator management',
isLink: '',
isHide: false,
isKeepAlive: true,
isAffix: false,
isIframe: false,
roles: ['admin', 'chief'],
icon: 'ele-ColdDrink',
zh: '管理员管理',
},
},
{ {
path: '/systemManagement/administrator', path: '/systemManagement/administrator',
name: 'administratorManagement', name: 'administratorManagement',

View File

@ -0,0 +1,185 @@
<template>
<el-dialog title="upload" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="upload picture" prop="img">
<el-upload
ref="upFileRef"
class="upload-demo"
drag
accept="image/*"
action="#"
multiple
:http-request="uploadPic"
:on-remove="removePic"
:before-upload="beforeUpload"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
Drop file here or <em>click to upload</em>
</div>
<template #tip>
<div class="el-upload__tip">
image files with a size less than 1GB
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item prop="type" label="data type">
<el-select v-model="state.ruleForm.type" class="m-2" placeholder="please select data type">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item prop="remark" label="data details">
<el-input v-model="state.ruleForm.remark" class="m-2" placeholder="please enter data details" :rows="3" type="textarea" style="width:220px;"/>
</el-form-item>
</el-form>
<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">upload</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {uploadData} from '/@/api/data/otherData.js';
import {ElMessage} from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
const upFileRef = ref();
const options = [
{
value: '0',
label: 'basic data',
},
{
value: '1',
label: 'responded report',
},
{
value: '2',
label: 'cartographic product',
}
]
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: [],
disasterId:null,
dataForm:new FormData(),
fileArray:[],
})
const validImg = (rule, value, callback) => {
if(state.fileArray.length>0){
adminAddFormRef.value.clearValidate('img')
callback();
}else{
return callback(new Error('please upload image'));
}
}
//
const rules = reactive({
img: [
{required: true,trigger: 'change',validator:validImg}
],
type: [
{required: true, message: 'please select data type', trigger: 'change'}
],
remark:[
{required: true, message: 'please select data details', trigger: 'blur'}
],
})
//
const beforeUpload = (file) => {
const isLt1GB = file.size / 1024 / 1024 / 1024 < 1;
if (!isLt1GB) {
ElMessage.warning('The size of the uploaded picture cannot exceed 1GB!');
}
return isLt1GB;
}
//
const uploadPic = (data) => {
state.fileArray.push(data.file);
}
//
const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item=>item.uid===data.raw.uid), 1)
console.log(state.fileArray)
}
//
const resetField = () => {
adminAddFormRef.value.resetFields();
state.fileArray = [];
upFileRef.value.clearFiles();
}
//
const openDialog = (row) => {
state.isShowDialog = true;
state.disasterId = row;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
state.fileArray.forEach(item=>{
state.dataForm.append('file',item);
})
state.dataForm.append('type',state.ruleForm.type);
state.dataForm.append('remark',state.ruleForm.remark);
state.dataForm.append('disasterId',state.disasterId);
for(let [a, b] of state.dataForm.entries()){
console.log(a, b, '--------------');
}
uploadData(state.dataForm).then(res => {
ElMessage.success("Upload successfully");
emit('callback');
}).finally(()=>{
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -1,93 +1,91 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<el-row :gutter="22">
<el-col :span="10">
<div class="system-role-padding layout-padding-auto layout-padding-view"> <div class="system-role-padding layout-padding-auto layout-padding-view">
<div class="system-user-search mb15"> <el-table :data="state.disasterData.data"
<!-- 选择灾害类型下拉框 --> v-loading="state.disasterData.loading"
<el-select v-model="value_disastertype" style="width: 100%"
size="default" highlight-current-row
placeholder="Select disaster type"> @row-click="tableClick">
<el-option v-for="item in options_disastertype" <el-table-column type="index"
:key="item.value" label="ID"
:label="item.label" width="50" />
:value="item.value" /> <el-table-column prop="disasterType"
</el-select> label="Disaster type"
<!-- 选择灾害时间下拉框 --> show-overflow-tooltip></el-table-column>
<el-date-picker v-model="value_disastertime" <el-table-column prop="disasterKeyword"
type="date" label="DisasterKeyword"
placeholder="Select disaster time" show-overflow-tooltip></el-table-column>
class="ml10" </el-table>
size="default" /> <el-pagination @size-change="onHandleDisasterSizeChange"
<!-- 选择灾害事件下拉框 --> @current-change="onHandleDisasterCurrentChange"
<el-select v-model="value_disasterevent" class="mt15"
size="default" :pager-count="5"
placeholder="Select disaster event" :page-sizes="[10, 20, 30]"
class="ml10"> v-model:current-page="state.disasterData.param.pageNum"
<el-option v-for="item in options_disasterevent" background
:key="item.value" v-model:page-size="state.disasterData.param.pageSize"
:label="item.label" layout="total, sizes, prev, pager, next, jumper"
:value="item.value" /> :total="state.disasterData.total">
</el-select> </el-pagination>
<!-- 选择数据类型下拉框 -->
<el-select v-model="value_datatype"
size="default"
placeholder="Select data type"
class="ml10">
<el-option v-for="item in options_datatype"
:key="item.value"
:label="item.label"
:value="item.value" />
</el-select>
<!-- 选择是否可视化下拉框 -->
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
<el-option v-for="item in options_visualization" :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">
<el-icon>
<ele-Search />
</el-icon>
Search
</el-button>
<el-button size="default"
type="success"
class="ml10">
<el-icon>
<ele-Search />
</el-icon>
Upload
</el-button>
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
<el-icon>
<ele-FolderAdd />
</el-icon>
新增角色
</el-button> -->
</div> </div>
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"> </el-col>
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip /> <el-col :span="14">
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column> <div class="system-role-padding layout-padding-auto layout-padding-view">
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column> <div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column> <el-select v-model="state.searchName" placeholder="please select data type" style="max-width: 200px" size="default" clearable>
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> --> <el-option value="1" label="basic data"></el-option>
<el-option value="2" label="responded report"></el-option>
<!-- 需修改弹出框页面 --> <el-option value="3" label="cartographic product"></el-option>
<!-- <el-table-column label="Crawler operation" width="100"> </el-select>
<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="uploadData">
<el-icon>
<ele-Upload/>
</el-icon>
upload
</el-button>
</div>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="uploaderName"
label="uploader Name"
show-overflow-tooltip></el-table-column>
<el-table-column prop="sourceOrganization"
label="Organization"
show-overflow-tooltip></el-table-column>
<el-table-column prop="title"
label="Professional title"
show-overflow-tooltip></el-table-column>
<el-table-column prop="size"
label="Data size"
show-overflow-tooltip>
<template #default="scope"> <template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button> {{formatSizeUnits(scope.row.size)}}
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> --> <el-table-column prop="uploadTime"
label="Upload time"
<!-- <el-pagination show-overflow-tooltip></el-table-column>
@size-change="onHandleSizeChange" <el-table-column prop="Operate"
label="Operate"
show-overflow-tooltip>
<template #default="scope">
<el-button size="small" text type="primary" @click="del(scope.row)">delete</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange" @current-change="onHandleCurrentChange"
class="mt15" class="mt15"
:pager-count="5" :pager-count="5"
@ -96,96 +94,49 @@
background background
v-model:page-size="state.tableData.param.pageSize" v-model:page-size="state.tableData.param.pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="state.tableData.total" :total="state.tableData.total">
> </el-pagination>
</el-pagination> -->
</div> </div>
</el-col>
</el-row>
<RoleDialog ref="roleDialogRef" <RoleDialog ref="roleDialogRef"
@refresh="getTableData()" /> @refresh="getTableData()" />
<Upload ref="uploadRef" @callback="getTableData"/>
</div> </div>
</template> </template>
<script setup name="systemRole"> <script lang="ts" setup name="systemRole">
import type { TabsPaneContext } from 'element-plus';
import Upload from './component/upload.vue';
import {getOtherDataPage,getDisasterPage,deleteData} from '/@/api/data/otherData.js'
const activeName = ref('first');
const handleClick = (tab: TabsPaneContext, event: Event) => {
console.log(tab, event);
};
//
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue'; import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
// //
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue')); const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const value_disastertype = ref(''); const auditRef = ref();
const value_disastertime = ref(''); const uploadRef = ref();
const value_datatype = ref('');
const value_crawlerstatus = ref('');
//
const options_disastertype = [
{
value: 'Earthquake',
label: 'Earthquake',
},
{
value: 'Hurricane',
label: 'Hurricane',
},
{
value: 'Flood',
label: 'Flood',
},
{
value: 'Volcano',
label: 'Volcano',
},
{
value: 'Drought',
label: 'Drought',
},
{
value: 'Landslide',
label: 'Landslide',
},
];
//
const options_datatype = [
{
value: 'Basic data',
label: 'Basic data',
},
{
value: 'News picture',
label: 'News picture',
},
{
value: 'Disaster report',
label: 'Disaster report',
},
{
value: 'Disaster mapping',
label: 'Disaster mapping',
},
{
value: 'Word cloud',
label: 'Word cloud',
},
{
value: 'Hotspot area',
label: 'Hotspot area',
},
];
//
const options_visualization = [
{
value: 'Yes',
label: 'Yes',
},
{
value: 'No',
label: 'No',
},
];
// //
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive({ const state = reactive({
searchName:'',
disasterId:null,
disasterData: {
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
},
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
@ -197,48 +148,104 @@ const state = reactive({
}, },
}, },
}); });
const auditData = (row) => {
let id = row.id
auditRef.value.openDialog([{"id":id}]);
}
//
const formatSize = (size) => {
var data = "";
if (size < 0.1 * 1024) { //0.1KBB
data = size.toFixed(2) + "B";
} else if (size < 0.1 * 1024 * 1024) {//0.1MBKB
data = (size / 1024).toFixed(2) + "KB";
} else if (size < 0.1 * 1024 * 1024 * 1024) { //0.1GBMB
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) 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];
}
//
const tableClick = (row, column, event) => {
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;
})
}
// //
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; getOtherDataPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"disasterId":state.disasterId,"type":state.searchName,"isDeleted":0}).then(res=>{
for (let i = 0; i < 20; i++) { state.tableData.data = res.records;
data.push({ state.tableData.total = res.total;
roleName: i === 0 ? '超级管理员' : '主要管理员', })
roleSign: i === 0 ? 'admin' : 'chief', /* state.tableData.data = data;
describe: `测试角色${i + 1}`, state.tableData.total = state.tableData.data.length;*/
sort: i,
status: true,
createTime: new Date().toLocaleString(),
});
}
state.tableData.data = data;
state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
}; };
// //
const onOpenAddRole = (type) => { const uploadData = () => {
roleDialogRef.value.openDialog(type); if(state.disasterId == null){
ElMessage.warning("Please select the disaster first")
return false;
}
uploadRef.value.openDialog(state.disasterId);
}; };
// //
const onOpenEditRole = (type, row) => { const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row); roleDialogRef.value.openDialog(type, row);
}; };
// //
const onRowDel = (row) => { const del = (row) => {
ElMessageBox.confirm(`此操作将永久删除角色名称:“${row.roleName}”,是否继续?`, '提示', { ElMessageBox.confirm(`This action deletes the other data${row.title}Whether to continue?`, 'tip', {
confirmButtonText: '确认', confirmButtonText: 'confirm',
cancelButtonText: '取消', cancelButtonText: 'cancel',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
deleteData(row.id).then(res=>{
getTableData(); getTableData();
ElMessage.success('删除成功'); ElMessage.success('delete successfully');
})
}) })
.catch(() => {}); .catch(() => {});
}; };
// //
const onHandleDisasterSizeChange = (val) => {
state.disasterData.param.pageSize = val;
getDisasterData();
};
//
const onHandleDisasterCurrentChange = (val) => {
state.disasterData.param.pageNum = val;
getDisasterData();
};
//
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
@ -250,11 +257,18 @@ const onHandleCurrentChange = (val) => {
}; };
// //
onMounted(() => { onMounted(() => {
getDisasterData();
getTableData(); getTableData();
}); });
</script> </script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
<style scoped lang="scss">
.system-role-container { .system-role-container {
.system-role-padding { .system-role-padding {
padding: 15px; padding: 15px;

View File

@ -0,0 +1,169 @@
<template>
<el-dialog title="upload" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="150px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="upload picture" prop="img">
<el-upload
ref="upFileRef"
class="upload-demo"
drag
accept="image/*"
action="#"
multiple
:http-request="uploadPic"
:on-remove="removePic"
:before-upload="beforeUpload"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
Drop file here or <em>click to upload</em>
</div>
<template #tip>
<div class="el-upload__tip">
image files with a size less than 1GB
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="Home page show" prop="isMain">
<el-select v-model="state.ruleForm.isMain" class="m-2" placeholder="please select home show">
<el-option
label="show"
value="1"
></el-option>
<el-option
label="not show"
value="0"
></el-option>
</el-select>
</el-form-item>
</el-form>
<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">upload</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {uploadData} from '/@/api/data/pictureInfo.js';
import {ElMessage} from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
const upFileRef = ref();
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: [],
disasterId:null,
dataForm:new FormData(),
fileArray:[],
})
const validImg = (rule, value, callback) => {
if(state.fileArray.length>0){
adminAddFormRef.value.clearValidate('img')
callback();
}else{
return callback(new Error('please upload image'));
}
}
//
const rules = reactive({
img: [
{required: true,trigger: 'change',validator:validImg}
],
isMain: [
{required: true, message: 'please select home page show', trigger: 'change'}
],
remark:[
{required: true, message: 'please select data details', trigger: 'blur'}
],
})
//
const beforeUpload = (file) => {
const isLt1GB = file.size / 1024 / 1024 / 1024 < 1;
if (!isLt1GB) {
ElMessage.warning('The size of the uploaded picture cannot exceed 1GB!');
}
return isLt1GB;
}
//
const uploadPic = (data) => {
state.fileArray.push(data.file);
}
//
const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item=>item.uid===data.raw.uid), 1)
console.log(state.fileArray)
}
//
const resetField = () => {
adminAddFormRef.value.resetFields();
state.fileArray = [];
upFileRef.value.clearFiles();
}
//
const openDialog = (row) => {
state.isShowDialog = true;
state.disasterId = row;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
state.fileArray.forEach(item=>{
state.dataForm.append('file',item);
})
state.dataForm.append('disasterId',state.disasterId);
state.dataForm.append('isMain',state.ruleForm.isMain);
for(let [a, b] of state.dataForm.entries()){
console.log(a, b, '--------------');
}
uploadData(state.dataForm).then(res => {
ElMessage.success("Upload successfully");
emit('callback');
}).finally(()=>{
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -0,0 +1,283 @@
<template>
<div class="system-role-container layout-padding">
<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="disasterKeyword"
label="DisasterKeyword"
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>
<ele-Search/>
</el-icon>
search
</el-button>
<el-button size="default" type="success" class="ml10" @click="uploadData">
<el-icon>
<ele-Upload/>
</el-icon>
upload
</el-button>
</div>
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="link"
label="image"
show-overflow-tooltip>
<template #default="scope">
<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">
</template>
<!-- 鼠标移入时弹出的图片 -->
<img :src="scope.row.link" alt="" style="height: 150px;width: 300px">
</el-popover>
</template>
</el-table-column>
<el-table-column prop="size"
label="size"
show-overflow-tooltip>
<template #default="scope">
{{formatSizeUnits(scope.row.size)}}
</template>
</el-table-column>
<el-table-column prop="type"
label="type"
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="del(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>
</div>
</el-col>
</el-row>
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
<Upload ref="uploadRef" @callback="getTableData"/>
</div>
</template>
<script lang="ts" setup name="systemRole">
import type { TabsPaneContext } from 'element-plus';
import Upload from './component/upload.vue';
import {getPicturePage,getDisasterPage,delPicture} from '/@/api/data/pictureInfo.js';
const activeName = ref('first');
//
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
//
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const auditRef = ref();
const uploadRef = ref();
//
const roleDialogRef = ref();
const state = reactive({
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 auditData = (row) => {
let id = row.id
auditRef.value.openDialog([{"id":id}]);
}
//
const formatSize = (size) => {
var data = "";
if (size < 0.1 * 1024) { //0.1KBB
data = size.toFixed(2) + "B";
} else if (size < 0.1 * 1024 * 1024) {//0.1MBKB
data = (size / 1024).toFixed(2) + "KB";
} else if (size < 0.1 * 1024 * 1024 * 1024) { //0.1GBMB
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));
return (size / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
}
//
const tableClick = (row, column, event) => {
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;
})
}
//
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);
};
//
const uploadData = () => {
if(state.disasterId == null){
ElMessage.warning("Please select the disaster first")
return false;
}
uploadRef.value.openDialog(state.disasterId);
};
//
const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row);
};
//
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(() => {});
};
//
const onHandleDisasterSizeChange = (val) => {
state.disasterData.param.pageSize = val;
getDisasterData();
};
//
const onHandleDisasterCurrentChange = (val) => {
state.disasterData.param.pageNum = val;
getDisasterData();
};
//
const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val;
getTableData();
};
//
const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val;
getTableData();
};
//
onMounted(() => {
getDisasterData();
//getTableData();
});
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.system-role-container {
.system-role-padding {
padding: 15px;
.el-table {
flex: 1;
}
}
}
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
</style>

View File

@ -0,0 +1,125 @@
<template>
<el-dialog title="upload" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="area cn" prop="areaCn">
<el-input v-model="state.ruleForm.areaCn" placeholder="please enter area cn" style="width: 300px"/>
</el-form-item>
<el-form-item prop="area en" label="areaEn">
<el-input v-model="state.ruleForm.areaEn" placeholder="please enter area en" style="width: 300px"/>
</el-form-item>
<el-form-item prop="frequency" label="frequency">
<el-input v-model="state.ruleForm.frequency" placeholder="please enter frequency" style="width: 300px"/>
</el-form-item>
</el-form>
<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">submit</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {uploadData} from '/@/api/data/visualData.js';
import {ElMessage} from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
const options = [
{
value: '0',
label: 'basic data',
},
{
value: '1',
label: 'responded report',
},
{
value: '2',
label: 'cartographic product',
}
]
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: [],
disasterId:null,
dataForm:new FormData(),
fileArray:[],
})
const uploadPic = (data) => {
state.fileArray.push(data.file);
}
//
const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item=>item.uid===data.raw.uid), 1)
console.log(state.fileArray)
}
//
const rules = reactive({
status: [
{required: true, message: 'please check pass or not', trigger: 'change'}
]
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = (row) => {
state.isShowDialog = true;
state.disasterId = row;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
state.ruleForm.type = 2;
state.ruleForm.disasterId = state.disasterId;
uploadData(state.ruleForm).then(res => {
ElMessage.success("Submit successfully");
emit('callback');
}).finally(()=>{
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -0,0 +1,131 @@
<template>
<el-dialog title="upload" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="time" prop="time">
<el-date-picker
v-model="state.ruleForm.time"
type="date"
placeholder="pick a date"
style="width: 300px"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item prop="frequency" label="frequency">
<el-input v-model="state.ruleForm.frequency" placeholder="please enter frequency" style="width: 300px"/>
</el-form-item>
<el-form-item prop="word" label="word">
<el-input v-model="state.ruleForm.word" placeholder="please enter word" style="width: 300px"/>
</el-form-item>
</el-form>
<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">submit</el-button>
</span>
</template>
</el-dialog>
</template>
<script setup>
import {reactive, ref} from "vue";
import {uploadData} from '/@/api/data/visualData.js';
import {ElMessage} from "element-plus";
import { UploadFilled } from '@element-plus/icons-vue'
const options = [
{
value: '0',
label: 'basic data',
},
{
value: '1',
label: 'responded report',
},
{
value: '2',
label: 'cartographic product',
}
]
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: [],
disasterId:null,
dataForm:new FormData(),
fileArray:[],
})
const uploadPic = (data) => {
state.fileArray.push(data.file);
}
//
const removePic = (data) => {
state.fileArray.splice(state.fileArray.findIndex(item=>item.uid===data.raw.uid), 1)
console.log(state.fileArray)
}
//
const rules = reactive({
status: [
{required: true, message: 'please check pass or not', trigger: 'change'}
]
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = (row) => {
state.isShowDialog = true;
state.disasterId = row;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
state.ruleForm.type = 1;
state.ruleForm.disasterId = state.disasterId;
uploadData(state.ruleForm).then(res => {
ElMessage.success("Submit successfully");
emit('callback');
}).finally(()=>{
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -0,0 +1,348 @@
<template>
<div class="system-role-container layout-padding">
<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="disasterKeyword"
label="DisasterKeyword"
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>
<ele-Search/>
</el-icon>
search
</el-button>-->
<el-button size="default" type="success" class="ml10" @click="uploadData">
<el-icon>
<ele-Upload/>
</el-icon>
upload
</el-button>
</div>
<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick" type="card">
<el-tab-pane label="wordclouds" name="first">
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="time"
label="time"
show-overflow-tooltip></el-table-column>
<el-table-column prop="frequency"
label="frequency"
show-overflow-tooltip></el-table-column>
<el-table-column prop="word"
label="word"
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="delWordCloud(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>
</el-tab-pane>
<el-tab-pane label="hotspot" name="second">
<el-table :data="state.tableData.data"
v-loading="state.tableData.loading"
style="width: 100%">
<el-table-column type="index"
label="ID"
width="50" />
<el-table-column prop="areaCn"
label="area cn"
show-overflow-tooltip></el-table-column>
<el-table-column prop="areaEn"
label="area en"
show-overflow-tooltip></el-table-column>
<el-table-column prop="frequency"
label="frequency"
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="delHotspot(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>
</el-tab-pane>
</el-tabs>
</div>
</el-col>
</el-row>
<RoleDialog ref="roleDialogRef"
@refresh="getTableData()" />
<HotspotForm ref="hotspotRef" @callback="getTableData"/>
<WordClouds ref="wordCloudsRef" @callback="getTableData"/>
</div>
</template>
<script lang="ts" setup name="systemRole">
import type { TabsPaneContext } from 'element-plus';
import HotspotForm from './component/hotspotForm.vue';
import WordClouds from './component/wordCloudForm.vue';
import {getWordClouds,getHotspot,getDisasterPage,delData} from '/@/api/data/visualData.js';
const activeName = ref('first');
const hotspotRef = ref();
const wordCloudsRef = ref();
const handleClick = (tab) => {
state.tabVal = tab;
state. tableData={
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
}
getTableData();
};
//
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
//
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const auditRef = ref();
const uploadRef = ref();
//
const roleDialogRef = ref();
const state = reactive({
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 auditData = (row) => {
let id = row.id
auditRef.value.openDialog([{"id":id}]);
}
//
const formatSize = (size) => {
var data = "";
if (size < 0.1 * 1024) { //0.1KBB
data = size.toFixed(2) + "B";
} else if (size < 0.1 * 1024 * 1024) {//0.1MBKB
data = (size / 1024).toFixed(2) + "KB";
} else if (size < 0.1 * 1024 * 1024 * 1024) { //0.1GBMB
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) 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];
}
//
const tableClick = (row, column, event) => {
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;
})
}
//
const getTableData = () => {
state.tableData.loading = true;
if(state.tabVal == 'first'){
getWordClouds(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;
})
}else {
getHotspot(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;
}
state.tabVal == 'first' ? wordCloudsRef.value.openDialog(state.disasterId) : hotspotRef.value.openDialog(state.disasterId);
};
//
const onOpenEditRole = (type, row) => {
roleDialogRef.value.openDialog(type, row);
};
//
const delWordCloud = (row) => {
ElMessageBox.confirm(`This action deletes the word cloud${row.word}Whether to continue?`, 'tip', {
confirmButtonText: 'confirm',
cancelButtonText: 'cancel',
type: 'warning',
})
.then(() => {
delData(row.id,1).then(res=>{
getTableData();
ElMessage.success('delete successfully');
})
})
.catch(() => {});
};
//
const delHotspot = (row) => {
ElMessageBox.confirm(`This action deletes the hotspot${row.areaEn}Whether to continue?`, 'tip', {
confirmButtonText: 'confirm',
cancelButtonText: 'cancel',
type: 'warning',
})
.then(() => {
delData(row.id,2).then(res=>{
getTableData();
ElMessage.success('delete successfully');
})
})
.catch(() => {});
};
//
const onHandleDisasterSizeChange = (val) => {
state.disasterData.param.pageSize = val;
getDisasterData();
};
//
const onHandleDisasterCurrentChange = (val) => {
state.disasterData.param.pageNum = val;
getDisasterData();
};
//
const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val;
getTableData();
};
//
const onHandleCurrentChange = (val) => {
state.tableData.param.pageNum = val;
getTableData();
};
//
onMounted(() => {
getDisasterData();
//getTableData();
});
</script>
<style>
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
.system-role-container {
.system-role-padding {
padding: 15px;
.el-table {
flex: 1;
}
}
}
.demo-tabs > .el-tabs__content {
padding: 32px;
color: #6b778c;
font-size: 32px;
font-weight: 600;
}
</style>

View File

@ -0,0 +1,99 @@
<template>
<el-dialog title="audit" v-model="state.isShowDialog" width="700px">
<el-form :model="state.ruleForm" size="default" label-width="120px" :rules="rules" ref="adminAddFormRef">
<el-form-item label="pass or not" prop="status">
<el-radio-group v-model="state.ruleForm.status">
<el-radio :label="1">pass</el-radio>
<el-radio :label="2">no pass</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<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 {reactive, ref} from "vue";
import {addAdmin} from '/@/api/response/administrator.js';
import {auditData} from '/@/api/response/dataUpload.js';
import {ElMessage} from "element-plus";
const emit = defineEmits(['callback']);
const adminAddFormRef = ref();
const state = reactive({
isShowDialog: false,
isLoading:false,
ruleForm: {
name: '', //
code: '',//
states: '',//
tableData: [],
},
tableData: [],
//
dictData: [],
unitData:[],
standardId: '',
detectionData: [],
data:[],
})
//
const rules = reactive({
status: [
{required: true, message: 'please check pass or not', trigger: 'change'}
]
})
//
const resetField = () => {
adminAddFormRef.value.resetFields();
}
//
const openDialog = (row) => {
console.log(row);
state.isShowDialog = true;
state.data = row;
};
//
const closeDialog = () => {
state.isShowDialog = false;
//
state.ruleForm.tableData = [];
resetField();
};
//
const onCancel = () => {
closeDialog();
};
//
const onSubmit = () => {
adminAddFormRef.value.validate((valid, fields) => {
if (valid) {
state.isLoading = true;
state.data.map(item=>item.status = state.ruleForm.status);
auditData(state.data).then(res => {
ElMessage.success("Audit successfully");
}).finally(()=>{
emit('callback');
state.isLoading = false;
})
closeDialog();
}
})
};
//
defineExpose({
openDialog,
});
</script>
<style scoped>
</style>

View File

@ -1,5 +1,37 @@
<template> <template>
<div class="system-role-container layout-padding"> <div class="system-role-container layout-padding">
<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="disasterKeyword"
label="DisasterKeyword"
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-role-padding layout-padding-auto layout-padding-view">
<el-table :data="state.tableData.data" <el-table :data="state.tableData.data"
v-loading="state.tableData.loading" v-loading="state.tableData.loading"
@ -7,55 +39,32 @@
<el-table-column type="index" <el-table-column type="index"
label="ID" label="ID"
width="50" /> width="50" />
<el-table-column prop="userName" <el-table-column prop="uploaderName"
label="User name" label="uploader Name"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="Organization" <el-table-column prop="sourceOrganization"
label="Organization" label="Organization"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="professionalTitle" <el-table-column prop="title"
label="Professional title" label="Professional title"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="researchField" <el-table-column prop="size"
label="Research field"
show-overflow-tooltip></el-table-column>
<el-table-column prop="Email"
label="Email"
show-overflow-tooltip></el-table-column>
<el-table-column prop="dataDetails"
label="Data details"
show-overflow-tooltip></el-table-column>
<el-table-column prop="dataFormat"
label="Data Format"
show-overflow-tooltip></el-table-column>
<el-table-column prop="dataSize"
label="Data size" label="Data size"
show-overflow-tooltip></el-table-column> show-overflow-tooltip>
<template #default="scope">
{{formatSizeUnits(scope.row.size)}}
</template>
</el-table-column>
<el-table-column prop="uploadTime" <el-table-column prop="uploadTime"
label="Upload time" label="Upload time"
show-overflow-tooltip></el-table-column> show-overflow-tooltip></el-table-column>
<el-table-column prop="Operate" <el-table-column prop="Operate"
label="Operate" label="Operate"
show-overflow-tooltip></el-table-column> show-overflow-tooltip>
<!-- <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>
<template #default="scope"> <template #default="scope">
<el-tag type="success" v-if="scope.row.status">启用</el-tag> <el-button size="small" text type="primary" @click="auditData(scope.row)">audit</el-button>
<el-tag type="info" v-else>禁用</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" width="100">
<template #default="scope">
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
>修改</el-button
>
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
>删除</el-button
>
</template>
</el-table-column> -->
</el-table> </el-table>
<el-pagination @size-change="onHandleSizeChange" <el-pagination @size-change="onHandleSizeChange"
@current-change="onHandleCurrentChange" @current-change="onHandleCurrentChange"
@ -69,14 +78,17 @@
:total="state.tableData.total"> :total="state.tableData.total">
</el-pagination> </el-pagination>
</div> </div>
</el-col>
</el-row>
<RoleDialog ref="roleDialogRef" <RoleDialog ref="roleDialogRef"
@refresh="getTableData()" /> @refresh="getTableData()" />
<Audit ref="auditRef" @callback="getTableData"/>
</div> </div>
</template> </template>
<script lang="ts" setup name="systemRole"> <script lang="ts" setup name="systemRole">
import type { TabsPaneContext } from 'element-plus'; import type { TabsPaneContext } from 'element-plus';
import {getDataUploadPage,getDisasterPage} from '/@/api/response/dataUpload.js'
const activeName = ref('first'); const activeName = ref('first');
const handleClick = (tab: TabsPaneContext, event: Event) => { const handleClick = (tab: TabsPaneContext, event: Event) => {
@ -86,13 +98,24 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
// //
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue'; import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'; import { ElMessageBox, ElMessage } from 'element-plus';
import Audit from './component/audit.vue';
// //
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue')); const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
const auditRef = ref();
// //
const roleDialogRef = ref(); const roleDialogRef = ref();
const state = reactive({ const state = reactive({
disasterId:null,
disasterData: {
data: [],
total: 0,
loading: false,
param: {
search: '',
pageNum: 1,
pageSize: 10,
},
},
tableData: { tableData: {
data: [], data: [],
total: 0, total: 0,
@ -104,22 +127,62 @@ const state = reactive({
}, },
}, },
}); });
const auditData = (row) => {
let id = row.id
auditRef.value.openDialog([{"id":id}]);
}
//
const formatSize = (size) => {
var data = "";
if (size < 0.1 * 1024) { //0.1KBB
data = size.toFixed(2) + "B";
} else if (size < 0.1 * 1024 * 1024) {//0.1MBKB
data = (size / 1024).toFixed(2) + "KB";
} else if (size < 0.1 * 1024 * 1024 * 1024) { //0.1GBMB
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) 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];
}
//
const tableClick = (row, column, event) => {
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;
})
}
// //
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
const data = []; getDataUploadPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"disasterId":state.disasterId}).then(res=>{
for (let i = 0; i < 10; i++) { state.tableData.data = res.records;
data.push({ state.tableData.total = res.total;
roleName: i === 0 ? '超级管理员' : '主要管理员', })
roleSign: i === 0 ? 'admin' : 'chief', /* state.tableData.data = data;
describe: `测试角色${i + 1}`, state.tableData.total = state.tableData.data.length;*/
sort: i,
status: true,
createTime: new Date().toLocaleString(),
});
}
state.tableData.data = data;
state.tableData.total = state.tableData.data.length;
setTimeout(() => { setTimeout(() => {
state.tableData.loading = false; state.tableData.loading = false;
}, 500); }, 500);
@ -146,6 +209,16 @@ const onRowDel = (row) => {
.catch(() => {}); .catch(() => {});
}; };
// //
const onHandleDisasterSizeChange = (val) => {
state.disasterData.param.pageSize = val;
getDisasterData();
};
//
const onHandleDisasterCurrentChange = (val) => {
state.disasterData.param.pageNum = val;
getDisasterData();
};
//
const onHandleSizeChange = (val) => { const onHandleSizeChange = (val) => {
state.tableData.param.pageSize = val; state.tableData.param.pageSize = val;
getTableData(); getTableData();
@ -157,6 +230,7 @@ const onHandleCurrentChange = (val) => {
}; };
// //
onMounted(() => { onMounted(() => {
getDisasterData();
getTableData(); getTableData();
}); });
</script> </script>

View File

@ -23,6 +23,7 @@ import {addAdmin} from '/@/api/response/administrator.js';
import {auditData} from '/@/api/response/adminManager.js'; import {auditData} from '/@/api/response/adminManager.js';
import {ElMessage} from "element-plus"; import {ElMessage} from "element-plus";
const adminAddFormRef = ref(); const adminAddFormRef = ref();
const emit = defineEmits(['callback']);
const state = reactive({ const state = reactive({
isShowDialog: false, isShowDialog: false,
isLoading:false, isLoading:false,

View File

@ -122,7 +122,6 @@ const auditManager = (row) => {
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
getAdminManagerPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"managerName":state.searchName}).then(res=>{ getAdminManagerPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"managerName":state.searchName}).then(res=>{
console.log("分页数据",res);
state.tableData.data = res.records; state.tableData.data = res.records;
state.tableData.total = res.total; state.tableData.total = res.total;
}) })

View File

@ -14,7 +14,7 @@
<el-input v-model="state.ruleForm.phone" placeholder="please enter phone" clearable style="width: 300px"></el-input> <el-input v-model="state.ruleForm.phone" placeholder="please enter phone" clearable style="width: 300px"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="organization" prop="organization"> <el-form-item label="organization" prop="organization">
<el-input v-model="state.ruleForm.organization" placeholder="please enter phone" clearable style="width: 300px"></el-input> <el-input v-model="state.ruleForm.organization" placeholder="please enter organization" clearable style="width: 300px"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@ -47,20 +47,50 @@ const state = reactive({
standardId: '', standardId: '',
detectionData: [] detectionData: []
}) })
//
let validateEmail = (rule, value, callback) => {
if (!value) {
return callback(new Error("please enter email"));
}
else {
const reg= /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/
if(reg.test(value)){
callback();
}else {
return callback(new Error("The mailbox format is incorrect"));
}
}
};
//
let checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('please enter phone'));
} else {
//
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
//
const phoneReg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
if (reg.test(value)||phoneReg.test(value)) {
callback();
} else {
return callback(new Error('Please enter the correct contact number'));
}
}
};
// //
const rules = reactive({ const rules = reactive({
name: [ name: [
{required: true, message: 'please enter name', trigger: 'blur'} {required: true, message: 'please enter name', trigger: 'blur'}
], ],
email: [ email: [
{required: true, message: 'please enter email', trigger: 'blur'} /* {required: true, trigger: 'blur',validator:validateEmail}*/
{required: true, trigger: 'blur',type:'email'}
], ],
account: [ account: [
{required: true, message: 'please enter account', trigger: 'blur'} {required: true, message: 'please enter account', trigger: 'blur'}
], ],
phone: [ phone: [
{required: true, message: 'please enter phone', trigger: 'blur'} {required: true, trigger: 'blur',validator:checkPhone}
], ],
organization: [ organization: [
{required: true, message: 'please enter organization', trigger: 'blur'} {required: true, message: 'please enter organization', trigger: 'blur'}
@ -95,7 +125,7 @@ const onSubmit = () => {
ElMessage.success("Add successfully"); ElMessage.success("Add successfully");
emit('callback'); emit('callback');
}).catch(err => { }).catch(err => {
ElMessage.error("Add failure"); //ElMessage.error("Add failure");
}).finally(()=>{ }).finally(()=>{
state.isLoading = false; state.isLoading = false;
}) })

View File

@ -110,7 +110,6 @@ const state = reactive({
const getTableData = () => { const getTableData = () => {
state.tableData.loading = true; state.tableData.loading = true;
getAdminPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"name_like":state.searchName}).then(res=>{ getAdminPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"name_like":state.searchName}).then(res=>{
console.log("分页数据",res);
state.tableData.data = res.records; state.tableData.data = res.records;
state.tableData.total = res.total; state.tableData.total = res.total;
}) })