添加批量删除和批量审核功能-liyuchen

src/api/data/pictureInfo.js

@@ -40,7 +40,7 @@ export const getPicturePage = (current,size,params) => {
 };
 
 /**
- * 上传基础数据
+ * 上传图片数据
  * @param data
  * @returns {Promise<AxiosResponse<any>>}
  */
@@ -55,12 +55,25 @@ export const uploadData = (data) => {
     });
 };
 
+/**
+ * 更新图片数据
+ * @param data
+ * @returns {Promise<AxiosResponse<any>>}
+ */
+export const updatePicture = (data) => {
+    return request({
+        url: '/api/' + moduleName + '/ui/pictureInfo/update',
+        method: 'put',
+        headers: {
+            'Content-Type': 'multipart/form-data'
+        },
+        data: data
+    });
+}
 
 /**
- * 根据灾害id查询图片数据
+ * 删除图片数据
- * @param current
+ * @param id
- * @param size
- * @param params
  * @returns {Promise<AxiosResponse<any>>}
  */
 export const delPicture = (id) => {

src/api/data/visualData.js

@@ -84,6 +84,32 @@ export const auditData = (data) => {
     });
 };
 
+/**
+ * 更新词云数据
+ * @param row
+ * @returns {Promise<AxiosResponse<any>>}
+ */
+export const updateWordCloud = (row) => {
+    return request({
+        url: '/api' + moduleName + '/ui/visualData/updateWordCloud',
+        method: 'put',
+        data: row
+    })
+}
+
+/**
+ * 更新热点数据
+ * @param row
+ * @returns {Promise<AxiosResponse<any>>}
+ */
+export const updateHotspot = (row) => {
+    return request({
+        url: '/api' + moduleName + '/ui/visualData/updateHotspot',
+        method: 'put',
+        data: row
+    })
+}
+
 
 /**
  * 根据灾害id查询图片数据

src/views/dataService/otherData/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="system-role-container layout-padding">
+    <el-config-provider :locale="en">
     <el-row :gutter="22">
       <el-col :span="10">
         <div class="system-role-padding layout-padding-auto layout-padding-view">
@@ -14,8 +15,11 @@
             <el-table-column prop="disasterType"
                              label="Disaster type"
                              show-overflow-tooltip></el-table-column>
-            <el-table-column prop="disasterKeyword"
+            <el-table-column prop="disasterCountry"
-                             label="DisasterKeyword"
+                             label="disaster country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="disaster time"
                              show-overflow-tooltip></el-table-column>
           </el-table>
           <el-pagination @size-change="onHandleDisasterSizeChange"
@@ -51,10 +55,18 @@
               </el-icon>
               upload
             </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="batchDel">
+              <el-icon>
+                <ele-Delete/>
+              </el-icon>
+              batch delete
+            </el-button>
           </div>
           <el-table :data="state.tableData.data"
                     v-loading="state.tableData.loading"
+                    @selection-change="handleSelectionChange"
                     style="width: 100%">
+            <el-table-column type="selection" width="55" />
             <el-table-column type="index"
                              label="ID"
                              width="50" />
@@ -99,6 +111,7 @@
         </div>
       </el-col>
     </el-row>
+    </el-config-provider>
     <RoleDialog ref="roleDialogRef"
                 @refresh="getTableData()" />
     <Upload ref="uploadRef" @callback="getTableData"/>
@@ -106,15 +119,12 @@
 </template>
 
 <script lang="ts" setup name="systemRole">
+import en from 'element-plus/dist/locale/en.mjs'
 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';
@@ -125,6 +135,7 @@ const uploadRef = ref();
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  multipleSelection:[],
   searchName:'',
   disasterId:null,
   disasterData: {
@@ -148,6 +159,9 @@ const state = reactive({
     },
   },
 });
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
 const auditData = (row) => {
   let id = row.id
   auditRef.value.openDialog([{"id":id}]);
@@ -220,7 +234,27 @@ const uploadData = () => {
 const onOpenEditRole = (type, row) => {
   roleDialogRef.value.openDialog(type, row);
 };
-// 删除角色
+//批量删除其他数据
+const batchDel = () => {
+  if(state.multipleSelection.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+ ElMessageBox.confirm(`This action batch deletes the other data，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    type: 'warning',
+  })
+      .then(() => {
+        let id = state.multipleSelection.map(item=>item.id)
+        deleteData(id.join()).then(res=>{
+          getTableData();
+          ElMessage.success('delete successfully');
+        })
+      })
+     .catch(() => {});
+}
+// 删除其他数据
 const del = (row) => {
   ElMessageBox.confirm(`This action deletes the other data：“${row.title}”，Whether to continue?`, 'tip', {
     confirmButtonText: 'confirm',

src/views/dataService/pictureInfo/component/editPicture.vue

@@ -0,0 +1,224 @@
+<template>
+  <el-dialog title="upload" v-model="state.isShowDialog" width="700px" close-on-click-modal="false">
+    <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"
+            v-model:file-list="state.fileList"
+            action="#"
+            list-type="picture-card"
+            accept="image/*"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove"
+            :on-change="changeUpload"
+            :limit="1"
+            :auto-upload="false"
+            :class="{hide: state.hideUpload }"
+        >
+          <el-icon><Plus /></el-icon>
+        </el-upload>
+
+        <el-dialog v-model="state.dialogVisible">
+          <img w-full :src="state.dialogImageUrl" alt="Preview Image" />
+        </el-dialog>
+      </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 { Plus } from '@element-plus/icons-vue'
+import {reactive, ref} from "vue";
+import {updatePicture} from '/@/api/data/pictureInfo.js';
+import {ElMessage} from "element-plus";
+import { UploadFilled } from '@element-plus/icons-vue'
+import {computed} from "@vue/reactivity";
+const upFileRef = ref();
+const emit = defineEmits(['callback']);
+const adminAddFormRef = ref();
+const state = reactive({
+  dialogVisible:false,
+  dialogImageUrl:'',
+  disabled:false,
+  hideUpload:false,
+  fileList:[],
+  isShowDialog: false,
+  isLoading:false,
+  ruleForm: {
+  },
+  tableData: [],
+  //字典值
+  dictData: [],
+  unitData:[],
+  standardId: '',
+  detectionData: [],
+  disasterId:null,
+  dataForm:new FormData(),
+  fileArray:[],
+  id:null,
+})
+//上传图片改变时
+const changeUpload = (file, fileList) => {
+  state.dialogImageUrl = file.url;
+  state.hideUpload = fileList.length >= 1;
+}
+//验证图片
+const validImg = (rule, value, callback) => {
+  if(state.fileList.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 handleRemove = (uploadFile, uploadFiles) => {
+  console.log(uploadFile, uploadFiles)
+  state.hideUpload = state.fileList.length >= 1
+}
+//图片预览
+const handlePictureCardPreview = (uploadFile) => {
+  state.dialogImageUrl = uploadFile.url
+  state.dialogVisible = true
+}
+//图片上传之前
+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.fileList = [];
+  upFileRef.value.clearFiles();
+}
+
+// 打开弹窗
+const openDialog = (row) => {
+  state.isShowDialog = true;
+  //回显图片
+  state.fileList.push({'name':row.name,'uid':row.id,'url':row.link});
+  state.hideUpload = state.fileList.length >= 1
+  //state.dialogImageUrl = row.link;
+  state.ruleForm.isMain = row.isMain+"";
+  state.id = row.id
+};
+// 关闭弹窗
+const closeDialog = () => {
+  state.isShowDialog = false;
+  //重置表格数据
+  state.ruleForm.tableData = [];
+  resetField();
+};
+// 取消
+const onCancel = () => {
+  closeDialog();
+};
+// 新增
+const onSubmit = () => {
+  adminAddFormRef.value.validate((valid, fields) => {
+    if (valid) {
+      console.log(state.fileList);
+      state.isLoading = true;
+      state.fileList.forEach(item=>{
+        state.dataForm.append('file',item.raw);
+      })
+      state.dataForm.append('isMain',state.ruleForm.isMain);
+      state.dataForm.append('id',state.id);
+      for(let [a, b] of state.dataForm.entries()){
+        console.log(a, b, '--------------');
+      }
+      updatePicture(state.dataForm).then(res => {
+        ElMessage.success("Upload successfully");
+        emit('callback');
+      }).finally(()=>{
+        state.isLoading = false;
+      })
+      closeDialog();
+    }
+  })
+};
+
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+.avatar-uploader .avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+
+.hide .el-upload--picture-card {
+  display: none;
+}
+</style>

src/views/dataService/pictureInfo/component/upload.vue

@@ -58,10 +58,6 @@ const state = reactive({
   isShowDialog: false,
   isLoading:false,
   ruleForm: {
-    name: '', //标样名称
-    code: '',//标样编号
-    states: '',//标样状态
-    tableData: [],
   },
   tableData: [],
   //字典值

src/views/dataService/pictureInfo/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="system-role-container layout-padding">
+    <el-config-provider :locale="en">
     <el-row :gutter="22">
       <el-col :span="10">
         <div class="system-role-padding layout-padding-auto layout-padding-view">
@@ -14,8 +15,11 @@
             <el-table-column prop="disasterType"
                              label="Disaster type"
                              show-overflow-tooltip></el-table-column>
-            <el-table-column prop="disasterKeyword"
+            <el-table-column prop="disasterCountry"
-                             label="DisasterKeyword"
+                             label="disaster country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="disaster time"
                              show-overflow-tooltip></el-table-column>
           </el-table>
           <el-pagination @size-change="onHandleDisasterSizeChange"
@@ -34,28 +38,43 @@
       <el-col :span="14">
         <div class="system-role-padding layout-padding-auto layout-padding-view">
           <div class="system-user-search mb15" style="display: flex;margin-left: 10px;margin-top: 10px;">
-            <el-input size="default" placeholder="please enter username" style="max-width: 180px" v-model="state.searchName"
+<!--            <el-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>-->
             <el-button size="default" type="success" class="ml10" @click="uploadData">
               <el-icon>
                 <ele-Upload/>
               </el-icon>
               upload
             </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="batchDel">
+              <el-icon>
+                <ele-Delete/>
+              </el-icon>
+              batch delete
+            </el-button>
           </div>
 
             <el-table :data="state.tableData.data"
                       v-loading="state.tableData.loading"
+                      @selection-change="handleSelectionChange"
                       style="width: 100%">
+              <el-table-column type="selection" width="55" />
               <el-table-column type="index"
                                label="ID"
                                width="50" />
+              <el-table-column prop="name"
+                               label="name"
+                               show-overflow-tooltip>
+                <template #default="scope">
+                  {{formatName(scope.row.name)}}
+                </template>
+              </el-table-column>
               <el-table-column prop="link"
                                label="image"
                                show-overflow-tooltip>
@@ -84,6 +103,7 @@
                                label="Operate"
                                show-overflow-tooltip>
                 <template #default="scope">
+                   <el-button size="small" text type="primary" @click="editData(scope.row)">edit</el-button>
                    <el-button size="small" text type="primary" @click="del(scope.row)">delete</el-button>
                 </template>
               </el-table-column>
@@ -102,16 +122,20 @@
         </div>
       </el-col>
     </el-row>
+    </el-config-provider>
     <RoleDialog ref="roleDialogRef"
                 @refresh="getTableData()" />
     <Upload ref="uploadRef" @callback="getTableData"/>
+    <EditPicture ref="editUploadRef" @callback="getTableData"/>
   </div>
 </template>
 
 <script lang="ts" setup name="systemRole">
 import type { TabsPaneContext } from 'element-plus';
 import Upload from './component/upload.vue';
+import EditPicture from './component/editPicture.vue';
 import {getPicturePage,getDisasterPage,delPicture} from '/@/api/data/pictureInfo.js';
+import en from 'element-plus/dist/locale/en.mjs'
 const activeName = ref('first');
 
 //复制内容
@@ -121,9 +145,11 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
 const auditRef = ref();
 const uploadRef = ref();
+const editUploadRef = ref();
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  multipleSelection:[],
   tabVal:'first',
   disasterId:null,
   disasterData: {
@@ -147,6 +173,16 @@ const state = reactive({
     },
   },
 });
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
+//格式化图片名称
+const formatName = (name) => {
+  if(name){
+    return name.substr(0,name.indexOf("."));
+  }
+  return name;
+}
 const auditData = (row) => {
   let id = row.id
   auditRef.value.openDialog([{"id":id}]);
@@ -214,10 +250,30 @@ const uploadData = () => {
   uploadRef.value.openDialog(state.disasterId);
 };
 // 打开修改角色弹窗
-const onOpenEditRole = (type, row) => {
+const editData = (row) => {
-  roleDialogRef.value.openDialog(type, row);
+  editUploadRef.value.openDialog(row);
 };
-// 删除角色
+//批量删除图片数据
+const batchDel = () => {
+  if(state.multipleSelection.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  ElMessageBox.confirm(`This action batch deletes the picture data，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    type: 'warning',
+  })
+      .then(() => {
+        let id = state.multipleSelection.map(item=>item.id)
+        delPicture(id.join()).then(res=>{
+          getTableData();
+          ElMessage.success('delete successfully');
+        })
+      })
+      .catch(() => {});
+}
+// 删除图片信息
 const del = (row) => {
   ElMessageBox.confirm(`This action will delete the picture：“${row.name}”，，Whether to continue?`, 'tip', {
     confirmButtonText: 'confirm',

src/views/dataService/visualData/component/editHotspotForm.vue

@@ -0,0 +1,123 @@
+<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 {updateHotspot} 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;
+  Object.assign(state.ruleForm,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;
+      updateHotspot(state.ruleForm).then(res => {
+        ElMessage.success("Submit successfully");
+        emit('callback');
+      }).finally(()=>{
+        state.isLoading = false;
+      })
+      closeDialog();
+    }
+  })
+};
+
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>

src/views/dataService/visualData/component/editWordCloudForm.vue

@@ -0,0 +1,129 @@
+<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 {updateWordCloud} 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;
+  Object.assign(state.ruleForm,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;
+      updateWordCloud(state.ruleForm).then(res => {
+        ElMessage.success("Submit successfully");
+        emit('callback');
+      }).finally(()=>{
+        state.isLoading = false;
+      })
+      closeDialog();
+    }
+  })
+};
+
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style scoped>
+
+</style>

src/views/dataService/visualData/component/hotspotForm.vue

@@ -4,7 +4,7 @@
       <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-form-item prop="areaEn" label="area en">
         <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">

src/views/dataService/visualData/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="system-role-container layout-padding">
+    <el-config-provider :locale="en">
     <el-row :gutter="22">
       <el-col :span="10">
         <div class="system-role-padding layout-padding-auto layout-padding-view">
@@ -14,8 +15,11 @@
             <el-table-column prop="disasterType"
                              label="Disaster type"
                              show-overflow-tooltip></el-table-column>
-            <el-table-column prop="disasterKeyword"
+            <el-table-column prop="disasterCountry"
-                             label="DisasterKeyword"
+                             label="disaster country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="disaster time"
                              show-overflow-tooltip></el-table-column>
           </el-table>
           <el-pagination @size-change="onHandleDisasterSizeChange"
@@ -48,12 +52,20 @@
               </el-icon>
               upload
             </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="batchDel">
+              <el-icon>
+                <ele-Delete/>
+              </el-icon>
+              batch delete
+            </el-button>
           </div>
           <el-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"
+                        @selection-change="handleSelectionChange"
                         style="width: 100%">
+                <el-table-column type="selection" width="55" />
                 <el-table-column type="index"
                                  label="ID"
                                  width="50" />
@@ -70,6 +82,7 @@
                                  label="Operate"
                                  show-overflow-tooltip>
                   <template #default="scope">
+                        <el-button size="small" text type="primary" @click="editWordCloud(scope.row)">edit</el-button>
                         <el-button size="small" text type="primary" @click="delWordCloud(scope.row)">delete</el-button>
                   </template>
                 </el-table-column>
@@ -89,7 +102,9 @@
             <el-tab-pane label="hotspot" name="second">
               <el-table :data="state.tableData.data"
                         v-loading="state.tableData.loading"
+                        @selection-change="handleSelectionHotspotChange"
                         style="width: 100%">
+                <el-table-column type="selection" width="55" />
                 <el-table-column type="index"
                                  label="ID"
                                  width="50" />
@@ -106,6 +121,7 @@
                                  label="Operate"
                                  show-overflow-tooltip>
                   <template #default="scope">
+                          <el-button size="small" text type="primary" @click="editHotspot(scope.row)">edit</el-button>
                           <el-button size="small" text type="primary" @click="delHotspot(scope.row)">delete</el-button>
                   </template>
                 </el-table-column>
@@ -126,10 +142,13 @@
         </div>
       </el-col>
     </el-row>
+    </el-config-provider>
     <RoleDialog ref="roleDialogRef"
                 @refresh="getTableData()" />
     <HotspotForm ref="hotspotRef" @callback="getTableData"/>
     <WordClouds ref="wordCloudsRef" @callback="getTableData"/>
+    <EditHotspotForm ref="editHotspotRef" @callback="getTableData"/>
+    <EditWordCloudsForm ref="editWordCloudsRef" @callback="getTableData"/>
   </div>
 </template>
 
@@ -137,24 +156,15 @@
 import type { TabsPaneContext } from 'element-plus';
 import HotspotForm from './component/hotspotForm.vue';
 import WordClouds from './component/wordCloudForm.vue';
+import EditHotspotForm from './component/editHotspotForm.vue';
+import EditWordCloudsForm from './component/editWordCloudForm.vue';
 import {getWordClouds,getHotspot,getDisasterPage,delData} from '/@/api/data/visualData.js';
+import en from 'element-plus/dist/locale/en.mjs'
 const activeName = ref('first');
 const hotspotRef = ref();
 const wordCloudsRef = ref();
-const handleClick = (tab) => {
+const editHotspotRef = ref();
-  state.tabVal = tab;
+const editWordCloudsRef = ref();
-  state. tableData={
-    data: [],
-        total: 0,
-        loading: false,
-        param: {
-      search: '',
-          pageNum: 1,
-          pageSize: 10,
-    },
-  }
-  getTableData();
-};
 
 //复制内容
 import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
@@ -166,6 +176,8 @@ const uploadRef = ref();
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  multipleWord:[],
+  multipleHotspot:[],
   tabVal:'first',
   disasterId:null,
   disasterData: {
@@ -189,6 +201,28 @@ const state = reactive({
     },
   },
 });
+
+const handleSelectionChange = (val) => {
+  state.multipleWord = val
+}
+
+const handleSelectionHotspotChange = (val) => {
+  state.multipleHotspot = val
+}
+const handleClick = (tab) => {
+  state.tabVal = tab;
+  state. tableData={
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  }
+  getTableData();
+};
 const auditData = (row) => {
   let id = row.id
   auditRef.value.openDialog([{"id":id}]);
@@ -262,10 +296,48 @@ const uploadData = () => {
   }
   state.tabVal == 'first' ? wordCloudsRef.value.openDialog(state.disasterId) : hotspotRef.value.openDialog(state.disasterId);
 };
-// 打开修改角色弹窗
+// 打开修改热点弹窗
-const onOpenEditRole = (type, row) => {
+const editHotspot = (row) => {
-  roleDialogRef.value.openDialog(type, row);
+  editHotspotRef.value.openDialog(row);
 };
+// 打开修改词云弹窗
+const editWordCloud = (row) => {
+  editWordCloudsRef.value.openDialog(row);
+};
+//批量删除词云或者热点数据
+const batchDel = () => {
+  if(state.tabVal == 'first' && state.multipleWord.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  if(state.tabVal == 'second' && state.multipleHotspot.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  ElMessageBox.confirm(`This action batch deletes the data，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    type: 'warning',
+  })
+      .then(() => {
+        if(state.tabVal == 'first'){
+          //删除词云
+          let id = state.multipleWord.map(item=>item.id)
+          delData(id.join(),1).then(res=>{
+            getTableData();
+            ElMessage.success('delete successfully');
+          })
+        }else{
+          //删除热点
+          let id = state.multipleHotspot.map(item=>item.id)
+          delData(id.join(),2).then(res=>{
+            getTableData();
+            ElMessage.success('delete successfully');
+          })
+        }
+      })
+      .catch(() => {});
+}
 // 删除词云
 const delWordCloud = (row) => {
   ElMessageBox.confirm(`This action deletes the word cloud：“${row.word}”，Whether to continue?`, 'tip', {

src/views/responseManagement/dataUpload/index.vue

@@ -14,8 +14,11 @@
             <el-table-column prop="disasterType"
                              label="Disaster type"
                              show-overflow-tooltip></el-table-column>
-            <el-table-column prop="disasterKeyword"
+            <el-table-column prop="disasterCountry"
-                             label="DisasterKeyword"
+                             label="disaster country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="disaster time"
                              show-overflow-tooltip></el-table-column>
           </el-table>
           <el-pagination @size-change="onHandleDisasterSizeChange"
@@ -33,9 +36,19 @@
       </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-button size="default" type="primary" class="ml10" @click="batchAudit">
+              <el-icon>
+                <ele-EditPen/>
+              </el-icon>
+              batch audit
+            </el-button>
+          </div>
           <el-table :data="state.tableData.data"
                     v-loading="state.tableData.loading"
+                    @selection-change="handleSelectionChange"
                     style="width: 100%">
+            <el-table-column type="selection" width="55" />
             <el-table-column type="index"
                              label="ID"
                              width="50" />
@@ -105,6 +118,7 @@ const auditRef = ref();
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  multipleSelection:[],
   disasterId:null,
   disasterData: {
     data: [],
@@ -127,6 +141,17 @@ const state = reactive({
 		},
 	},
 });
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
+//批量审核普通管理员数据
+const batchAudit = () => {
+  if(state.multipleSelection.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  auditRef.value.openDialog(state.multipleSelection);
+}
 const auditData = (row) => {
   let id = row.id
   auditRef.value.openDialog([{"id":id}]);

src/views/systemManagement/administrator/index.vue

@@ -10,16 +10,18 @@
           </el-icon>
           search
         </el-button>
-<!--        <el-button size="default" type="success" class="ml10" @click="addUser">
+        <el-button size="default" type="primary" class="ml10" @click="batchAudit">
           <el-icon>
-            <ele-FolderAdd/>
+            <ele-EditPen/>
           </el-icon>
-          add
+          batch audit
-        </el-button>-->
+        </el-button>
       </div>
       <el-table :data="state.tableData.data"
                 v-loading="state.tableData.loading"
+                @selection-change="handleSelectionChange"
                 style="width: 100%">
+        <el-table-column type="selection" width="55" />
         <el-table-column type="index"
                          label="ID"
                          width="50" />
@@ -90,6 +92,7 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  multipleSelection:[],
   searchName:'',
   tableData: {
     data: [],
@@ -102,6 +105,9 @@ const state = reactive({
     },
   },
 });
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
 //审核管理者可以管理这个灾害
 const auditManager = (row) => {
   auditRef.value.openDialog([{...row}]);
@@ -138,7 +144,15 @@ const addUser = () => {
 const onOpenEditRole = (type, row) => {
   roleDialogRef.value.openDialog(type, row);
 };
-// 删除角色
+//批量审核普通管理员数据
+const batchAudit = () => {
+  if(state.multipleSelection.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  auditRef.value.openDialog(state.multipleSelection);
+}
+// 删除普通管理员
 const deleteUser = (row) => {
   ElMessageBox.confirm(`This operation will delete the user：“${row.name}”，Whether to continue?`, 'tip', {
     confirmButtonText: 'confirm',

src/views/systemManagement/chiefAdministrator/index.vue

@@ -16,10 +16,18 @@
           </el-icon>
           add
         </el-button>
+        <el-button size="default" type="danger" class="ml10" @click="batchDel">
+          <el-icon>
+            <ele-Delete/>
+          </el-icon>
+          batch delete
+        </el-button>
       </div>
       <el-table :data="state.tableData.data"
                 v-loading="state.tableData.loading"
+                @selection-change="handleSelectionChange"
                 style="width: 100%">
+        <el-table-column type="selection" width="55" />
         <el-table-column type="index"
                          label="ID"
                          width="50" />
@@ -94,6 +102,7 @@ const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialo
 // 定义变量内容
 const roleDialogRef = ref();
 const state = reactive({
+  multipleSelection:[],
   searchName:'',
 	tableData: {
 		data: [],
@@ -106,6 +115,9 @@ const state = reactive({
 		},
 	},
 });
+const handleSelectionChange = (val) => {
+  state.multipleSelection = val
+}
 // 初始化表格数据
 const getTableData = () => {
 	state.tableData.loading = true;
@@ -118,7 +130,7 @@ const getTableData = () => {
 		state.tableData.loading = false;
 	}, 500);
 };
-// 打开新增角色弹窗
+// 打开新增chief管理员弹窗
 const addUser = () => {
   administratorRef.value.openDialog();
 };
@@ -126,7 +138,27 @@ const addUser = () => {
 const onOpenEditRole = (type, row) => {
 	roleDialogRef.value.openDialog(type, row);
 };
-// 删除角色
+//批量删除chief管理员数据
+const batchDel = () => {
+  if(state.multipleSelection.length == 0){
+    ElMessage.warning("Select the data to be operated first");
+    return false;
+  }
+  ElMessageBox.confirm(`This action batch deletes the chief data，Whether to continue?`, 'tip', {
+    confirmButtonText: 'confirm',
+    cancelButtonText: 'cancel',
+    type: 'warning',
+  })
+      .then(() => {
+        let id = state.multipleSelection.map(item=>item.id)
+        remove(id.join()).then(res=>{
+          getTableData();
+          ElMessage.success('delete successfully');
+        })
+      })
+      .catch(() => {});
+}
+// 删除chief管理员数据
 const deleteUser = (row) => {
 	ElMessageBox.confirm(`This operation will delete the user：“${row.name}”，Whether to continue?`, 'tip', {
 		confirmButtonText: 'confirm',