diff --git a/package-lock.json b/package-lock.json
index c62f0ac..ceda835 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -329,6 +329,11 @@
 				"fastq": "^1.6.0"
 			}
 		},
+		"@popperjs/core": {
+			"version": "npm:@sxzz/popperjs-es@2.11.7",
+			"resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+			"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+		},
 		"@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -946,13 +951,6 @@
 				"lodash-unified": "^1.0.2",
 				"memoize-one": "^6.0.0",
 				"normalize-wheel-es": "^1.2.0"
-			},
-			"dependencies": {
-				"@popperjs/core": {
-					"version": "npm:@sxzz/popperjs-es@2.11.7",
-					"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-					"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-				}
 			}
 		},
 		"esbuild": {
diff --git a/src/api/data/otherData.js b/src/api/data/otherData.js
new file mode 100644
index 0000000..6e6c838
--- /dev/null
+++ b/src/api/data/otherData.js
@@ -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
+        }
+    });
+};
\ No newline at end of file
diff --git a/src/api/data/pictureInfo.js b/src/api/data/pictureInfo.js
new file mode 100644
index 0000000..da6be7c
--- /dev/null
+++ b/src/api/data/pictureInfo.js
@@ -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
+        }
+    });
+};
\ No newline at end of file
diff --git a/src/api/data/visualData.js b/src/api/data/visualData.js
new file mode 100644
index 0000000..0bbdf77
--- /dev/null
+++ b/src/api/data/visualData.js
@@ -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
+        }
+    });
+};
\ No newline at end of file
diff --git a/src/api/response/adminManager.js b/src/api/response/adminManager.js
index 55427cd..7a86f5d 100644
--- a/src/api/response/adminManager.js
+++ b/src/api/response/adminManager.js
@@ -9,7 +9,7 @@ import request, {moduleName} from '/@/utils/request';
  */
 export const getAdminManagerPage = (current,size,params) => {
     return request({
-        url: '/api/' + moduleName + '/adminManager/pages',
+        url: '/api/' + moduleName + '/ui/adminManager/pages',
         method: 'get',
         params: {
             current,
@@ -26,7 +26,7 @@ export const getAdminManagerPage = (current,size,params) => {
  */
 export const auditData = (data) => {
     return request({
-        url: '/api/' + moduleName + '/adminManager/audit',
+        url: '/api/' + moduleName + '/ui/adminManager/audit',
         method: 'post',
         data: data
     });
@@ -35,7 +35,7 @@ export const auditData = (data) => {
 
 export const remove = (ids) => {
     return request({
-        url: '/api/' + moduleName + '/administrator/delete',
+        url: '/api/' + moduleName + '/ui/administrator/delete',
         method: 'delete',
         params: {
             ids,
diff --git a/src/api/response/administrator.js b/src/api/response/administrator.js
index 378bd26..a35995d 100644
--- a/src/api/response/administrator.js
+++ b/src/api/response/administrator.js
@@ -9,7 +9,7 @@ import request, {moduleName} from '/@/utils/request';
  */
 export const getAdminPage = (current,size,params) => {
     return request({
-        url: '/api/' + moduleName + '/administrator/pages',
+        url: '/api/' + moduleName + '/ui/administrator/pages',
         method: 'get',
         params: {
             current,
@@ -26,7 +26,7 @@ export const getAdminPage = (current,size,params) => {
  */
 export const addAdmin = (data) => {
     return request({
-        url: '/api/' + moduleName + '/administrator/add',
+        url: '/api/' + moduleName + '/ui/administrator/add',
         method: 'post',
         data: data
     });
diff --git a/src/api/response/dataUpload.js b/src/api/response/dataUpload.js
new file mode 100644
index 0000000..19d1b8c
--- /dev/null
+++ b/src/api/response/dataUpload.js
@@ -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
+    });
+};
\ No newline at end of file
diff --git a/src/components/form/index.vue b/src/components/form/index.vue
new file mode 100644
index 0000000..c0547b1
--- /dev/null
+++ b/src/components/form/index.vue
@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/router/route.js b/src/router/route.js
index 9ea09e0..5f7c748 100644
--- a/src/router/route.js
+++ b/src/router/route.js
@@ -77,22 +77,6 @@ export const dynamicRoutes = [
 							zh: '用户响应管理',
 						},
 					},
-					{
-						path: '/responseManagement/administrator',
-						name: 'administrator-management',
-						component: () => import('/@/views/responseManagement/administrator/addAdministrator.vue'),
-						meta: {
-							title: 'Administrator management',
-							isLink: '',
-							isHide: false,
-							isKeepAlive: true,
-							isAffix: false,
-							isIframe: false,
-							roles: ['admin', 'chief'],
-							icon: 'ele-ColdDrink',
-							zh: '管理员管理',
-						},
-					},
 					{
 						path: '/responseManagement/dataUpload',
 						name: 'data-upload-management',
@@ -208,6 +192,38 @@ export const dynamicRoutes = [
 							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: '其他数据服务',
+						},
+					},
 				],
 			},
 			{
@@ -227,6 +243,22 @@ export const dynamicRoutes = [
 					zh: '系统管理',
 				},
 				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',
 						name: 'administratorManagement',
diff --git a/src/views/dataService/otherData/component/upload.vue b/src/views/dataService/otherData/component/upload.vue
new file mode 100644
index 0000000..34dc48c
--- /dev/null
+++ b/src/views/dataService/otherData/component/upload.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/dataService/otherData/index.vue b/src/views/dataService/otherData/index.vue
index 0443ea4..8112ab1 100644
--- a/src/views/dataService/otherData/index.vue
+++ b/src/views/dataService/otherData/index.vue
@@ -1,191 +1,142 @@
 <template>
   <div class="system-role-container layout-padding">
-    <div class="system-role-padding layout-padding-auto layout-padding-view">
-      <div class="system-user-search mb15">
-        <!-- 选择灾害类型下拉框 -->
-        <el-select v-model="value_disastertype"
-                   size="default"
-                   placeholder="Select disaster type">
-          <el-option v-for="item in options_disastertype"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value" />
-        </el-select>
-        <!-- 选择灾害时间下拉框 -->
-        <el-date-picker v-model="value_disastertime"
-                        type="date"
-                        placeholder="Select disaster time"
-                        class="ml10"
-                        size="default" />
-        <!-- 选择灾害事件下拉框 -->
-        <el-select v-model="value_disasterevent"
-                   size="default"
-                   placeholder="Select disaster event"
-                   class="ml10">
-          <el-option v-for="item in options_disasterevent"
-                     :key="item.value"
-                     :label="item.label"
-                     :value="item.value" />
-        </el-select>
-
-        <!-- 选择数据类型下拉框 -->
-        <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>
-      <!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
-				<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
-				<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
-
-      <!-- 需修改弹出框页面 -->
-      <!-- <el-table-column label="Crawler operation" width="100">
-					<template #default="scope">
-						<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
-						<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</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-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-select v-model="state.searchName" placeholder="please select data type"  style="max-width: 200px"  size="default" clearable>
+                <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-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">
+                {{formatSizeUnits(scope.row.size)}}
+              </template>
+            </el-table-column>
+            <el-table-column prop="uploadTime"
+                             label="Upload time"
+                             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 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 { ElMessageBox, ElMessage } from 'element-plus';
-
 // 引入组件
 const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
-const value_disastertype = ref('');
-const value_disastertime = 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 auditRef = ref();
+const uploadRef = ref();
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  searchName:'',
+  disasterId:null,
+  disasterData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
   tableData: {
     data: [],
     total: 0,
@@ -197,46 +148,102 @@ 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.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) 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;
-  const data = [];
-  for (let i = 0; i < 20; i++) {
-    data.push({
-      roleName: i === 0 ? '超级管理员' : '主要管理员',
-      roleSign: i === 0 ? 'admin' : 'chief',
-      describe: `测试角色${i + 1}`,
-      sort: i,
-      status: true,
-      createTime: new Date().toLocaleString(),
-    });
-  }
-  state.tableData.data = data;
-  state.tableData.total = state.tableData.data.length;
+  getOtherDataPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"disasterId":state.disasterId,"type":state.searchName,"isDeleted":0}).then(res=>{
+    state.tableData.data = res.records;
+    state.tableData.total = res.total;
+  })
+  /*	state.tableData.data = data;
+    state.tableData.total = state.tableData.data.length;*/
   setTimeout(() => {
     state.tableData.loading = false;
   }, 500);
 };
-// 打开新增角色弹窗
-const onOpenAddRole = (type) => {
-  roleDialogRef.value.openDialog(type);
+// 打开上传弹窗
+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 onRowDel = (row) => {
-  ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
-    confirmButtonText: '确认',
-    cancelButtonText: '取消',
+const del = (row) => {
+  ElMessageBox.confirm(`This action deletes the other data：“${row.title}”，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
     type: 'warning',
   })
-    .then(() => {
-      getTableData();
-      ElMessage.success('删除成功');
-    })
-    .catch(() => { });
+      .then(() => {
+        deleteData(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) => {
@@ -250,17 +257,24 @@ const onHandleCurrentChange = (val) => {
 };
 // 页面加载时
 onMounted(() => {
+  getDisasterData();
   getTableData();
 });
 </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-padding {
-		padding: 15px;
-		.el-table {
-			flex: 1;
-		}
-	}
+  .system-role-padding {
+    padding: 15px;
+    .el-table {
+      flex: 1;
+    }
+  }
 }
 </style>
diff --git a/src/views/dataService/pictureInfo/component/upload.vue b/src/views/dataService/pictureInfo/component/upload.vue
new file mode 100644
index 0000000..e7b7f4b
--- /dev/null
+++ b/src/views/dataService/pictureInfo/component/upload.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/dataService/pictureInfo/index.vue b/src/views/dataService/pictureInfo/index.vue
new file mode 100644
index 0000000..256004e
--- /dev/null
+++ b/src/views/dataService/pictureInfo/index.vue
@@ -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.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));
+
+  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>
diff --git a/src/views/dataService/visualData/component/hotspotForm.vue b/src/views/dataService/visualData/component/hotspotForm.vue
new file mode 100644
index 0000000..78e4b11
--- /dev/null
+++ b/src/views/dataService/visualData/component/hotspotForm.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/dataService/visualData/component/wordCloudForm.vue b/src/views/dataService/visualData/component/wordCloudForm.vue
new file mode 100644
index 0000000..35b33d5
--- /dev/null
+++ b/src/views/dataService/visualData/component/wordCloudForm.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/dataService/visualData/index.vue b/src/views/dataService/visualData/index.vue
new file mode 100644
index 0000000..ad5d532
--- /dev/null
+++ b/src/views/dataService/visualData/index.vue
@@ -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.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) 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>
diff --git a/src/views/responseManagement/dataUpload/component/audit.vue b/src/views/responseManagement/dataUpload/component/audit.vue
new file mode 100644
index 0000000..7fb7f00
--- /dev/null
+++ b/src/views/responseManagement/dataUpload/component/audit.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/responseManagement/dataUpload/index.vue b/src/views/responseManagement/dataUpload/index.vue
index 92b35bb..292b704 100644
--- a/src/views/responseManagement/dataUpload/index.vue
+++ b/src/views/responseManagement/dataUpload/index.vue
@@ -1,82 +1,94 @@
 <template>
   <div class="system-role-container layout-padding">
-    <div class="system-role-padding layout-padding-auto layout-padding-view">
-      <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="userName"
-                         label="User name"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Organization"
-                         label="Organization"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="professionalTitle"
-                         label="Professional title"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="researchField"
-                         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"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="uploadTime"
-                         label="Upload time"
-                         show-overflow-tooltip></el-table-column>
-        <el-table-column prop="Operate"
-                         label="Operate"
-                         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>
-							<template #default="scope">
-								<el-tag type="success" v-if="scope.row.status">启用</el-tag>
-								<el-tag type="info" v-else>禁用</el-tag>
-							</template>
-						</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-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-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">
+          <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">
+                {{formatSizeUnits(scope.row.size)}}
+              </template>
+            </el-table-column>
+            <el-table-column prop="uploadTime"
+                             label="Upload time"
+                             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="auditData(scope.row)">audit</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()" />
+    <Audit ref="auditRef" @callback="getTableData"/>
   </div>
 </template>
 
 <script lang="ts" setup name="systemRole">
 import type { TabsPaneContext } from 'element-plus';
-
+import {getDataUploadPage,getDisasterPage} from '/@/api/response/dataUpload.js'
 const activeName = ref('first');
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
@@ -86,13 +98,24 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
 //复制内容
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-
+import Audit from './component/audit.vue';
 // 引入组件
 const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
-
+const auditRef = ref();
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  disasterId:null,
+  disasterData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
 	tableData: {
 		data: [],
 		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.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) 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;
-	const data = [];
-	for (let i = 0; i < 10; i++) {
-		data.push({
-			roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'chief',
-			describe: `测试角色${i + 1}`,
-			sort: i,
-			status: true,
-			createTime: new Date().toLocaleString(),
-		});
-	}
-	state.tableData.data = data;
-	state.tableData.total = state.tableData.data.length;
+  getDataUploadPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"disasterId":state.disasterId}).then(res=>{
+    state.tableData.data = res.records;
+    state.tableData.total = res.total;
+  })
+/*	state.tableData.data = data;
+	state.tableData.total = state.tableData.data.length;*/
 	setTimeout(() => {
 		state.tableData.loading = false;
 	}, 500);
@@ -146,6 +209,16 @@ const onRowDel = (row) => {
 		.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();
@@ -157,6 +230,7 @@ const onHandleCurrentChange = (val) => {
 };
 // 页面加载时
 onMounted(() => {
+  getDisasterData();
 	getTableData();
 });
 </script>
diff --git a/src/views/responseManagement/userResponse/index.vue b/src/views/responseManagement/userResponse/index.vue
index e3b9f44..b5c4fee 100644
--- a/src/views/responseManagement/userResponse/index.vue
+++ b/src/views/responseManagement/userResponse/index.vue
@@ -26,15 +26,13 @@
             <!-- <el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column> -->
             <el-table-column prop="respondStatus" label="Response status" show-overflow-tooltip>
               <template #default="scope">
-                <el-tag type="info" v-if="scope.row.respondStatus===0">Not reviewed</el-tag>
-                <el-tag type="info" v-if="scope.row.respondStatus===1">Failed</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 0">Not reviewed</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 1">Failed</el-tag>
               </template>
             </el-table-column>
             <el-table-column prop="Operate" label="Operate" show-overflow-tooltip>
               <template #default="scope">
-                <el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
-                  >Review</el-button
-                >
+                <el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Review</el-button>
               </template>
             </el-table-column>
 
@@ -91,8 +89,8 @@
             <el-table-column prop="respondStatus" label="Response status" show-overflow-tooltip>
 
               <template #default="scope">
-                <el-tag type="info" v-if="scope.row.respondStatus===2">Reviewed</el-tag>
-                <el-tag type="info" v-if="scope.row.respondStatus===1">Failed</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 2">Reviewed</el-tag>
+                <el-tag type="info" v-if="scope.row.respondStatus === 1">Failed</el-tag>
               </template>
 
             </el-table-column>
@@ -124,20 +122,22 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-    <el-dialog
-      v-model="state.dialogVisible"
-      title="Review"
-      width="30%"
-      :before-close="handleClose"
-    >
+    <el-dialog v-model="state.dialogVisible" title="Review" width="30%" :before-close="handleClose">
+      <el-container style="margin-top: -2%;margin-bottom: 2%;">
+        <el-radio v-model="state.radio" label='1'>Point</el-radio>
+        <el-radio v-model="state.radio" label='2'>Area</el-radio>
+        <el-button type="primary" style="margin-left: 5%;">Clear</el-button>
+      </el-container>
+      <el-container style="margin-top: 2%;margin-bottom: 2%;" v-if="state.radio==='1'?true:false">
+        <span style="line-height: 35px;"> Latitude：</span>
+        <el-input v-model="input" placeholder="请输入内容" style="height:35px;margin-right: 1%;"></el-input>
+        <span style="line-height: 35px;">Longitude：</span>
+        <el-input v-model="input" placeholder="请输入内容" style="height:35px;"></el-input>
+      </el-container>
       <Map style="height:350px ; width:100% ;margin-bottom: 10px;" ref="map"></Map>
-      <el-form-item label ="Disaster Time">
-         <el-date-picker
-          v-model="state.edit.disasterTime"
-          type="date"
-          value-format="YYYY-MM-DD"
-          placeholder="Select date and time"
-          />
+      <el-form-item label="Disaster Time">
+        <el-date-picker v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
+          placeholder="Select date and time" />
       </el-form-item>
 
       <template #footer>
@@ -156,22 +156,25 @@
 </template>
 
 <script  setup name="userResponse">
-import {  reactive, onMounted, ref,nextTick } from 'vue';
-import { ElMessageBox, ElMessage} from 'element-plus';
-import {getList ,review } from '/@/api/disasterInfo/index';
+import { reactive, onMounted, ref, nextTick } from 'vue';
+import { ElMessageBox, ElMessage } from 'element-plus';
+import { getList, review } from '/@/api/disasterInfo/index';
 import { getDictionary } from '/@/api/system/dictbiz';
 //引入地图
 import Map from '/@/components/Map.vue';
 import { useDateFormat } from '@vueuse/shared';
-
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+import 'leaflet-draw/dist/leaflet.draw'
+import 'leaflet-draw/dist/leaflet.draw.css'
 const map = ref(null);
 const activeName = ref('first');
 
-const handleClick = (tab ,event) => {
-  state.selectName=tab.props.name;
+const handleClick = (tab, event) => {
+  state.selectName = tab.props.name;
   getTableData();
 };
-const dateFormat = (date) =>{
+const dateFormat = (date) => {
   return useDateFormat(date, 'YYYY-MM-DD').value;
 }
 // 定义变量内容
@@ -186,20 +189,21 @@ const state = reactive({
       search: '',
       current: 1,
       size: 10,
-      respondStatus:0,
+      respondStatus: 0,
     },
   },
   disasterTypeList: [],
   selectName: 'first',
-  edit:{} ,
+  edit: {},
+  radio:null,
 });
 // 初始化表格数据
 const getTableData = () => {
   state.tableData.loading = true;
   //根据activeName的值来判断是哪个tab页
-  if(state.selectName === 'first'){
+  if (state.selectName === 'first') {
     state.tableData.param.respondStatus = 0;
-  }else{
+  } else {
     state.tableData.param.respondStatus = 2;
   }
   console.log(activeName.value);
@@ -224,19 +228,19 @@ const onOpenEditRole = (type, row) => {
   });
   state.dialogVisible = true;
 };
-const reviews = (index) =>{
+const reviews = (index) => {
   //将修改后的地图位置赋值到state.edit.geometry
   //TODO 修改地图赋值
   //state.edit.geometry = map.mapOperations.getWkt();
 
   //判断index的值来判断是审核通过还是不通过
-  if(index === 1){
+  if (index === 1) {
     state.edit.respondStatus = 1;
-  }else{
+  } else {
     state.edit.respondStatus = 2;
   }
   //时间格式化
-  state.edit.disasterTime = useDateFormat(state.edit.disasterTime, 'YYYY-MM-DD').value+" 00:00:00";
+  state.edit.disasterTime = useDateFormat(state.edit.disasterTime, 'YYYY-MM-DD').value + " 00:00:00";
   review(state.edit).then((res) => {
     ElMessage.success('操作成功');
     state.dialogVisible = false;
@@ -252,13 +256,13 @@ const onHandleCurrentChange = (val) => {
 // 页面加载时
 onMounted(() => {
   getTableData();
-  getDictionary({code:'disaster'}).then((res) => {
+  getDictionary({ code: 'disaster' }).then((res) => {
     state.disasterTypeList = res;
   });
 });
 const getValue = (key) => {
   //返回state.disasterTypeLis 对应的value 
-  return state.disasterTypeList.find((item) => item.dictKey === key)?.dictValue;  
+  return state.disasterTypeList.find((item) => item.dictKey === key)?.dictValue;
 };
 </script>
 <style>
diff --git a/src/views/systemManagement/administrator/component/audit.vue b/src/views/systemManagement/administrator/component/audit.vue
index 9d7ff89..18fdf15 100644
--- a/src/views/systemManagement/administrator/component/audit.vue
+++ b/src/views/systemManagement/administrator/component/audit.vue
@@ -23,6 +23,7 @@ import {addAdmin} from '/@/api/response/administrator.js';
 import {auditData} from '/@/api/response/adminManager.js';
 import {ElMessage} from "element-plus";
 const adminAddFormRef = ref();
+const emit = defineEmits(['callback']);
 const state = reactive({
   isShowDialog: false,
   isLoading:false,
diff --git a/src/views/systemManagement/administrator/index.vue b/src/views/systemManagement/administrator/index.vue
index 2b92f44..7f3ad17 100644
--- a/src/views/systemManagement/administrator/index.vue
+++ b/src/views/systemManagement/administrator/index.vue
@@ -122,7 +122,6 @@ const auditManager = (row) => {
 const getTableData = () => {
   state.tableData.loading = true;
   getAdminManagerPage(state.tableData.param.pageNum,state.tableData.param.pageSize,{"managerName":state.searchName}).then(res=>{
-    console.log("分页数据",res);
     state.tableData.data = res.records;
     state.tableData.total = res.total;
   })
diff --git a/src/views/responseManagement/administrator/addAdministrator.vue b/src/views/systemManagement/chiefAdministrator/component/addAdministrator.vue
similarity index 72%
rename from src/views/responseManagement/administrator/addAdministrator.vue
rename to src/views/systemManagement/chiefAdministrator/component/addAdministrator.vue
index 9284c36..c7e5a97 100644
--- a/src/views/responseManagement/administrator/addAdministrator.vue
+++ b/src/views/systemManagement/chiefAdministrator/component/addAdministrator.vue
@@ -14,7 +14,7 @@
         <el-input v-model="state.ruleForm.phone" placeholder="please enter phone" clearable style="width: 300px"></el-input>
       </el-form-item>
       <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>
     <template #footer>
@@ -47,20 +47,50 @@ const state = reactive({
   standardId: '',
   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({
   name: [
     {required: true, message: 'please enter name', trigger: 'blur'}
   ],
   email: [
-    {required: true, message: 'please enter email', trigger: 'blur'}
+   /* {required: true, trigger: 'blur',validator:validateEmail}*/
+    {required: true, trigger: 'blur',type:'email'}
   ],
   account: [
     {required: true, message: 'please enter account', trigger: 'blur'}
   ],
   phone: [
-    {required: true, message: 'please enter phone', trigger: 'blur'}
+    {required: true, trigger: 'blur',validator:checkPhone}
   ],
   organization: [
     {required: true, message: 'please enter organization', trigger: 'blur'}
@@ -95,7 +125,7 @@ const onSubmit = () => {
         ElMessage.success("Add successfully");
         emit('callback');
       }).catch(err => {
-        ElMessage.error("Add failure");
+        //ElMessage.error("Add failure");
       }).finally(()=>{
         state.isLoading = false;
       })
diff --git a/src/views/systemManagement/chief/index.vue b/src/views/systemManagement/chiefAdministrator/index.vue
similarity index 99%
rename from src/views/systemManagement/chief/index.vue
rename to src/views/systemManagement/chiefAdministrator/index.vue
index fca4219..f7644fb 100644
--- a/src/views/systemManagement/chief/index.vue
+++ b/src/views/systemManagement/chiefAdministrator/index.vue
@@ -110,7 +110,6 @@ const state = reactive({
 const getTableData = () => {
 	state.tableData.loading = true;
   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.total = res.total;
   })