样式添加

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": {

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 === 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 === 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)"
+                <el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Review</el-button>
-                  >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 === 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 === 1">Failed</el-tag>
               </template>
 
             </el-table-column>
@@ -124,20 +122,22 @@
         </el-tab-pane>
       </el-tabs>
     </div>
-    <el-dialog
+    <el-dialog v-model="state.dialogVisible" title="Review" width="30%" :before-close="handleClose">
-      v-model="state.dialogVisible"
+      <el-container style="margin-top: -2%;margin-bottom: 2%;">
-      title="Review"
+        <el-radio v-model="state.radio" label='1'>Point</el-radio>
-      width="30%"
+        <el-radio v-model="state.radio" label='2'>Area</el-radio>
-      :before-close="handleClose"
+        <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-form-item label="Disaster Time">
-         <el-date-picker
+        <el-date-picker v-model="state.edit.disasterTime" type="date" value-format="YYYY-MM-DD"
-          v-model="state.edit.disasterTime"
+          placeholder="Select date and time" />
-          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 { reactive, onMounted, ref, nextTick } from 'vue';
-import { ElMessageBox, ElMessage} from 'element-plus';
+import { ElMessageBox, ElMessage } from 'element-plus';
-import {getList ,review } from '/@/api/disasterInfo/index';
+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) => {
+const handleClick = (tab, event) => {
-  state.selectName=tab.props.name;
+  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>