zqq:遥感影像爬取和检索

package.json

@@ -13,10 +13,10 @@
     "@element-plus/icons-vue": "^2.1.0",
     "axios": "^1.3.4",
     "echarts": "^5.4.2",
-        "leaflet": "^1.9.3",
     "element-plus": "^2.3.1",
     "js-cookie": "^3.0.1",
     "js-md5": "^0.7.3",
+    "leaflet": "^1.9.3",
     "mitt": "^3.0.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.33",
@@ -27,7 +27,6 @@
     "vue": "^3.2.47",
     "vue-clipboard3": "^2.0.0",
     "vue-demi": "^0.13.11",
-		"qs": "^6.11.1",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6"
   },

src/layout/navBars/breadcrumb/user.vue

@@ -1,27 +1,42 @@
 <template>
-	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
+  <div class="layout-navbars-breadcrumb-user pr15"
-		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+       :style="{ flex: layoutUserFlexNum }">
+    <el-dropdown :show-timeout="70"
+                 :hide-timeout="50"
+                 trigger="click"
+                 @command="onComponentSizeChange">
       <div class="layout-navbars-breadcrumb-user-icon">
-				<i class="iconfont icon-ziti" title="组件大小"></i>
+        <i class="iconfont icon-ziti"
+           title="组件大小"></i>
       </div>
       <template #dropdown>
         <el-dropdown-menu>
-					<el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
+          <el-dropdown-item command="large"
-					<el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
+                            :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
-					<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
+          <el-dropdown-item command="default"
+                            :disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
+          <el-dropdown-item command="small"
+                            :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>
-		<div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">
+    <div class="layout-navbars-breadcrumb-user-icon"
+         @click="onSearchClick">
       <el-icon title="菜单搜索">
         <ele-Search />
       </el-icon>
     </div>
-		<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
+    <div class="layout-navbars-breadcrumb-user-icon"
-			<i class="icon-skin iconfont" title="布局配置"></i>
+         @click="onLayoutSetingClick">
+      <i class="icon-skin iconfont"
+         title="布局配置"></i>
     </div>
     <div class="layout-navbars-breadcrumb-user-icon">
-			<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
+      <el-popover placement="bottom"
+                  trigger="click"
+                  transition="el-zoom-in-top"
+                  :width="300"
+                  :persistent="false">
         <template #reference>
           <el-badge :is-dot="true">
             <el-icon title="消息">
@@ -34,17 +49,19 @@
         </template>
       </el-popover>
     </div>
-		<div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
+    <div class="layout-navbars-breadcrumb-user-icon mr10"
-			<i
+         @click="onScreenfullClick">
-				class="iconfont"
+      <i class="iconfont"
          :title="state.isScreenfull ? '关全屏' : '开全屏'"
-				:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"
+         :class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
-			></i>
     </div>
-		<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
+    <el-dropdown :show-timeout="70"
+                 :hide-timeout="50"
+                 @command="onHandleCommandClick">
       <span class="layout-navbars-breadcrumb-user-link">
-				<img :src="userInfos.photo" class="layout-navbars-breadcrumb-user-link-photo mr5" />
+        <img :src="userInfos.photo"
-				{{ userInfos.userName === '' ? 'common' : userInfos.userName }}
+             class="layout-navbars-breadcrumb-user-link-photo mr5" />
+        {{ userInfos.userName === '' ? 'chief' : userInfos.userName }}
         <el-icon class="el-icon--right">
           <ele-ArrowDown />
         </el-icon>
@@ -55,7 +72,8 @@
           <el-dropdown-item command="wareHouse">代码仓库</el-dropdown-item>
           <el-dropdown-item command="/404">404</el-dropdown-item>
           <el-dropdown-item command="/401">401</el-dropdown-item>
-					<el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
+          <el-dropdown-item divided
+                            command="logOut">退出登录</el-dropdown-item>
         </el-dropdown-menu>
       </template>
     </el-dropdown>

src/router/backEnd.js

@@ -130,20 +130,20 @@ export function menuToRoutes(menus) {
 		let route = {};
 		//判断是否有子节点
 		if (menu.children && menu.children.length > 0) {
-			route.children = menuToRoutes(menu.children)
+			route.children = menuToRoutes(menu.children);
 		}
 		route.ttid = menu.id;
 		route.path = menu.path;
 		route.name = menu.code;
-		route.component = menu.path + "/index";
+		route.component = menu.path + '/index';
 		route.meta = {
 			title: menu.name,
 			icon: menu.source,
 			isHide: menu.isHidden === 1 || menu.isHidden === '1',
-			routes: ['admin','common'],
+			routes: ['admin', 'chief'],
 			isKeepAlive: false,
 			isAffix: menu.path.indexOf('/home') > -1,
-		}
+		};
 		routes.push(route);
 	});
 	return routes;

src/router/route.js

@@ -7,7 +7,7 @@
  *      isKeepAlive：   是否缓存组件状态
  *      isAffix：       是否固定在 tagsView 栏上
  *      isIframe：      是否内嵌窗口，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
- *      roles：         当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
+ *      roles：         当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 主要管理员：chief
  *      icon：          菜单、tagsView 图标，阿里：加 `iconfont xxx`，fontawesome：加 `fa xxx`
  * }
  */
@@ -40,7 +40,7 @@ export const dynamicRoutes = [
 					isAffix: true,
 					isIframe: false,
 					roles: ['admin', 'chief'],
-					icon: 'iconfont icon-shouye',
+					// icon: 'iconfont icon-shouye',
 				},
 			},
 			{
@@ -56,7 +56,7 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					roles: ['admin'],
-					icon: 'iconfont icon-xitongshezhi',
+					// icon: 'iconfont icon-xitongshezhi',
 				},
 				children: [
 					{
@@ -71,7 +71,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							roles: ['admin'],
-							icon: 'iconfont icon-caidan',
+							// icon: 'iconfont icon-caidan',
 						},
 					},
 					{
@@ -86,7 +86,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							roles: ['admin'],
-							icon: 'ele-ColdDrink',
+							// icon: 'ele-ColdDrink',
 						},
 					},
 					{
@@ -101,7 +101,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							roles: ['admin', 'chief'],
-							icon: 'iconfont icon-icon-',
+							// icon: 'iconfont icon-icon-',
 						},
 					},
 				],
@@ -119,7 +119,7 @@ export const dynamicRoutes = [
 					isAffix: false,
 					isIframe: false,
 					roles: ['admin', 'chief'],
-					icon: 'iconfont icon-xitongshezhi',
+					// icon: 'iconfont icon-xitongshezhi',
 				},
 				children: [
 					{
@@ -134,7 +134,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							roles: ['admin', 'chief'],
-							icon: 'iconfont icon-caidan',
+							// icon: 'iconfont icon-caidan',
 						},
 					},
 					{
@@ -149,7 +149,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							roles: ['admin', 'chief'],
-							icon: 'ele-ColdDrink',
+							// icon: 'ele-ColdDrink',
 						},
 					},
 					{
@@ -164,7 +164,7 @@ export const dynamicRoutes = [
 							isAffix: false,
 							isIframe: false,
 							roles: ['admin', 'chief'],
-							icon: 'ele-ColdDrink',
+							// icon: 'ele-ColdDrink',
 						},
 					},
 				],

src/views/dataService/multimediaData/index.vue

@@ -3,19 +3,40 @@
     <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-select v-model="value_disastertype"
-					<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
+                   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-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-select v-model="value_disasterevent"
-					<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
+                   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_crawlertype" size="default" placeholder="Select crawler type" class="ml10">
+        <el-select v-model="value_crawlertype"
-					<el-option v-for="item in options_crawlertype" :key="item.value" :label="item.label" :value="item.value" />
+                   size="default"
+                   placeholder="Select crawler type"
+                   class="ml10">
+          <el-option v-for="item in options_crawlertype"
+                     :key="item.value"
+                     :label="item.label"
+                     :value="item.value" />
         </el-select>
         <!-- 选择爬虫状态下拉框 -->
         <!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" class="ml10">
@@ -24,21 +45,27 @@
 
         <!-- <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-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-button size="default"
+                   type="success"
+                   class="ml10">
           <el-icon>
             <ele-Search />
           </el-icon>
           Start crawling
         </el-button>
 
-                <el-button size="default" type="warning" class="ml10">
+        <el-button size="default"
+                   type="warning"
+                   class="ml10">
           <el-icon>
             <ele-Search />
           </el-icon>
@@ -81,7 +108,8 @@
 			>
 			</el-pagination> -->
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -176,8 +204,8 @@ const getTableData = () => {
   const data = [];
   for (let i = 0; i < 20; i++) {
     data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+      roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+      roleSign: i === 0 ? 'admin' : 'chief',
       describe: `测试角色${i + 1}`,
       sort: i,
       status: true,

src/views/dataService/otherData/index.vue

@@ -203,8 +203,8 @@ const getTableData = () => {
   const data = [];
   for (let i = 0; i < 20; i++) {
     data.push({
-      roleName: i === 0 ? '超级管理员' : '普通用户',
+      roleName: i === 0 ? '超级管理员' : '主要管理员',
-      roleSign: i === 0 ? 'admin' : 'common',
+      roleSign: i === 0 ? 'admin' : 'chief',
       describe: `测试角色${i + 1}`,
       sort: i,
       status: true,

src/views/dataService/remoteSensingData/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="container">
-    <div class="rsSelect">
     <el-tabs v-model="state.activeName"
              @tab-click="handleClick">
       <el-tab-pane label="Search condition"
                    name="first">
 
+        <div class="rsSelect">
           <el-card class="box-card">
             <span>Select time range</span>
             <div class="block">
@@ -34,27 +34,34 @@
                           view-class="view-box"
                           :native="false">
               <div class="coordinateContainer"
-                   v-for="(coordinate, i) in state.coordinateList">{{
+                   v-for="(coordinate,i) in state.coordinateList">
-                    // coordinate
+                <span style="font-size:14px;float: left;width: 70%;">{{
-                      'Lat:' + coordinate.lat.toFixed("3") + ',&nbsp;&nbsp;&nbsp;&nbsp;Lng:' + coordinate.lng.toFixed("3")
+                      'Lat:&emsp;' + parseFloat(coordinate.Lat).toFixed(4) + ',&emsp;&emsp;Lng:&emsp;' + parseFloat(coordinate.Lng).toFixed(4)
-                      }}
+                      }}</span>
-                &nbsp;&nbsp;&nbsp;&nbsp;
+                <span style="width:20%;margin-left: 80%;">
-                <el-button class="el-icon-edit"
+                  <el-button class="el-icon"
-                           size="small"></el-button>
+                             @click="editCoordinate"
-                <el-button class="el-icon-close"
+                             size="small">
-                           size="small"></el-button>
+                    <ele-Edit />
+                  </el-button>
+                  <el-button class="el-icon"
+                             @click="state.coordinateList.splice(i, 1);"
+                             size="small">
+                    <ele-Delete />
+                  </el-button>
+                </span>
+
               </div>
             </el-scrollbar>
-            <el-button @click="addCoordinate">Add coordinates</el-button>
+            <el-button class="coordinateBtn"
-            <el-button @click="clearCoordinate">Clear coordinates</el-button>
+                       @click="addCoordinate">Add coordinates</el-button>
+            <el-button class="coordinateBtn"
+                       @click="clearCoordinate">Clear coordinates</el-button>
           </el-card>
 
           <el-card class="box-card"
                    style="margin-top: 3%;">
             <span>Select satellite type</span>
-            <el-scrollbar wrap-class="sensor_list"
-                          view-class="view-box"
-                          :native="false">
             <el-tree-select class="satelliteSelect"
                             v-model="state.satelliteSelected"
                             :data="sensor"
@@ -62,16 +69,192 @@
                             :render-after-expand="false"
                             show-checkbox
                             placeholder="Select satellite type" />
-            </el-scrollbar>
           </el-card>
 
-          <el-button @click="startCrawl">Start Crawl</el-button>
+          <el-card class="box-card"
-          <el-button>Cancel</el-button>
+                   style="margin-top: 3%;">
+            <span>Select VoRDM ID</span>
+            <el-select class="idSelect"
+                       v-model="state.selectID"
+                       clearable
+                       placeholder="Select VoRDM ID">
+              <el-option v-for="item in idOptions"
+                         :key="item.value"
+                         :label="item.label"
+                         :value="item.value" />
+            </el-select>
+          </el-card>
+
+          <el-button class="lowerBtn"
+                     @click="startCrawl">Start Crawl</el-button>
+          <el-button class="lowerBtn"
+                     @click="ClearCondition">Cancel</el-button>
+        </div>
+
+        <Map id="map"></Map>
 
       </el-tab-pane>
-      </el-tabs>
+
+      <el-tab-pane label="Retrieval condition"
+                   name="second">
+
+        <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_crawlertype"
+                     size="default"
+                     placeholder="Select crawler type"
+                     class="ml10">
+            <el-option v-for="item in options_crawlertype"
+                       :key="item.value"
+                       :label="item.label"
+                       :value="item.value" />
+          </el-select>
+          <!-- 选择爬虫状态下拉框 -->
+          <!-- <el-select v-model="value_crawlerstatus" size="default" placeholder="Select crawler status" class="ml10">
+					<el-option v-for="item in options_crawlerstatus" :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>
+            Start crawling
+          </el-button>
+
+          <el-button size="default"
+                     type="warning"
+                     class="ml10">
+            <el-icon>
+              <ele-Search />
+            </el-icon>
+            Stop crawling
+          </el-button>
+
+          <!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
+					<el-icon>
+						<ele-FolderAdd />
+					</el-icon>
+					新增角色
+				</el-button> -->
         </div>
-    <Map id="map"></Map>
+
+        <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="Administrator"
+                           label="Administrator"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Email"
+                           label="Email"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Organization"
+                           label="Organization"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Disaster type"
+                           label="Disaster type"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Disaster keyword"
+                           label="Disaster keyword"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Affected country"
+                           label="Affected country"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Longitude"
+                           label="Longitude"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Latitude"
+                           label="Latitude"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="disasterTime"
+                           label="Disaster time"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="responseTime"
+                           label="Response time"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="Operate"
+                           label="Operate"
+                           show-overflow-tooltip></el-table-column>
+          <el-table-column prop="responseStatus"
+                           label="Response status"
+                           show-overflow-tooltip></el-table-column>
+
+          <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
+						<el-table-column prop="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>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
@@ -79,17 +262,7 @@
 import { ref, reactive } from 'vue';
 import Map from "/@/components/Map.vue";
 
-
+// 卫星类型
-const state = reactive({
-  activeName: 'first',
-  startTime: '',
-  endTime: '',
-  addCoord: false,
-  satelliteSelected: [],
-  coordinateList: [],
-
-})
-
 const sensor = ref([
   {
     value: 'landsat',
@@ -207,6 +380,101 @@ const sensor = ref([
   }
 ])
 
+// VoRDM ID
+const idOptions = [
+  {
+    value: '2023001001',
+    label: '2023001001',
+  },
+  {
+    value: '2023001002',
+    label: '2023001002',
+  },
+  {
+    value: '2023001003',
+    label: '2023001003',
+  },
+  {
+    value: '2023001004',
+    label: '2023001004',
+  },
+  {
+    value: '2023001005',
+    label: '2023001005',
+  },
+]
+
+//选择灾害类型下拉框
+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_crawlertype = [
+  {
+    value: 'Bing',
+    label: 'Bing',
+  },
+  {
+    value: 'Twitter',
+    label: 'Twitter',
+  },
+  {
+    value: 'Baidu',
+    label: 'Baidu',
+  },
+  {
+    value: 'Weibo',
+    label: 'Weibo',
+  },
+];
+
+const state = reactive({
+  activeName: 'first',
+  startTime: '',
+  endTime: '',
+  addCoord: false,
+  satelliteSelected: [],
+  coordinateList: [],
+  selectID: '',
+  tableData: {
+    data: [],
+    total: 0,
+    loading: false,
+    param: {
+      search: '',
+      pageNum: 1,
+      pageSize: 10,
+    },
+  },
+  value_disastertype: '',
+  value_disastertime: '',
+  value_crawlertype: '',
+})
+
 const shortcuts = [
   {
     text: '1 month ago',
@@ -238,12 +506,12 @@ const shortcuts = [
 const addCoordinate = () => {
   state.addCoord = !state.addCoord;
   state.coordinateList = [
-    //   '43.538', '111.530', '36.195', '120.761'
     {
       Lat: '43.538'
       ,
       Lng: '111.530'
-    }, {
+    },
+    {
       Lat: '36.195'
       ,
       Lng: '120.761'
@@ -256,7 +524,12 @@ const clearCoordinate = () => {
   state.startTime = '';
   state.endTime = '';
 }
+// 编辑坐标点
+const editCoordinate = () => {
 
+}
+
+// 开始爬虫
 const startCrawl = () => {
   console.log("start time:", state.startTime)
   console.log("end time:", state.endTime)
@@ -264,38 +537,41 @@ const startCrawl = () => {
   console.log("satelliteSelected:", state.satelliteSelected)
 }
 
+// 清空搜索条件
+const ClearCondition = () => {
+  state.startTime = ''
+  state.endTime = ''
+  state.addCoord = false
+  state.satelliteSelected = []
+  state.coordinateList = []
+  state.selectID = ''
+}
+
 </script>
 
 <style scoped lang="scss">
 .container {
-	padding: 2% 1%;
+	padding: 1% 1%;
 	.rsSelect {
 		float: left;
-		border: 1px solid blue;
+		border: 1px solid #040728;
 		width: 30%;
-		height: 53rem;
+		height: 52rem;
 		span {
 			display: block;
 			margin-bottom: 3%;
+			font-size: 18px;
 		}
-		.satelliteSelect {
+		.satelliteSelect,
-			width: 75%;
+		.idSelect {
-			margin: 10px 0 10px 10px;
+			width: 90%;
-		}
+			margin: 2% 3% 0 3%;
-
-		.el-tree {
-			margin: 10px 0 0 0;
-			color: black;
-			border-radius: 4px;
-		}
-
-		.el-tree-node__label {
-			font-size: 12px;
 		}
 
 		.block {
-			margin: 2% 0;
+			margin-top: 2%;
 			.demonstration {
+				font-size: 14px;
 				float: left;
 				height: 20px;
 				line-height: 40px;
@@ -304,14 +580,18 @@ const startCrawl = () => {
 			}
 		}
 		.coordinateContainer {
-			width: 200px;
+			margin: 3%;
-			height: 200px;
+		}
-			border: 1px solid red;
+		.coordinateBtn {
+			margin-left: 3%;
+		}
+		.lowerBtn {
+			margin: 3% 0 3% 3%;
 		}
 	}
 	#map {
 		width: 70%;
-		height: 53rem;
+		height: 52rem;
 		float: left;
 	}
 }

src/views/dataUploadAndRetrieval/dataRetrieval/index.vue

@@ -3,19 +3,40 @@
     <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-select v-model="value_disastertype"
-					<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
+                   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-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-select v-model="value_disasterevent"
-					<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
+                   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-select v-model="value_datatype"
-					<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
+                   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">
@@ -24,14 +45,18 @@
 
         <!-- <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-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-button size="default"
+                   type="success"
+                   class="ml10">
           <el-icon>
             <ele-Search />
           </el-icon>
@@ -75,7 +100,8 @@
 			>
 			</el-pagination> -->
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -161,8 +187,8 @@ const getTableData = () => {
   const data = [];
   for (let i = 0; i < 20; i++) {
     data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+      roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+      roleSign: i === 0 ? 'admin' : 'chief',
       describe: `测试角色${i + 1}`,
       sort: i,
       status: true,

src/views/dataUploadAndRetrieval/dataUpload/index.vue

@@ -3,19 +3,40 @@
     <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-select v-model="value_disastertype"
-					<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
+                   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-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-select v-model="value_disasterevent"
-					<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
+                   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-select v-model="value_datatype"
-					<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
+                   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">
@@ -24,14 +45,18 @@
 
         <!-- <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-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-button size="default"
+                   type="success"
+                   class="ml10">
           <el-icon>
             <ele-Search />
           </el-icon>
@@ -75,7 +100,8 @@
 			>
 			</el-pagination> -->
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -177,8 +203,8 @@ const getTableData = () => {
   const data = [];
   for (let i = 0; i < 20; i++) {
     data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+      roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+      roleSign: i === 0 ? 'admin' : 'chief',
       describe: `测试角色${i + 1}`,
       sort: i,
       status: true,

src/views/responseManagement/administrator/index.vue

@@ -1,17 +1,39 @@
 <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 :data="state.tableData.data"
-				<el-table-column type="index" label="ID" width="50" />
+                v-loading="state.tableData.loading"
-				<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
+                style="width: 100%">
-				<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
+        <el-table-column type="index"
-				<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
+                         label="ID"
-				<el-table-column prop="Contact details" label="Contact details" show-overflow-tooltip></el-table-column>
+                         width="50" />
-				<el-table-column prop="vordmId" label="VoRDM ID" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="userName"
-				<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column>
+                         label="User name"
-				<el-table-column prop="applicationTime" label="Application time" show-overflow-tooltip></el-table-column>
+                         show-overflow-tooltip></el-table-column>
-				<el-table-column prop="Remark" label="Remark" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="Email"
-				<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
+                         label="Email"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="Organization"
+                         label="Organization"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="Contact details"
+                         label="Contact details"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="vordmId"
+                         label="VoRDM ID"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="disasterType"
+                         label="Disaster type"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="applicationTime"
+                         label="Application time"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="Remark"
+                         label="Remark"
+                         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> -->
@@ -32,8 +54,7 @@
 							</template>
 						</el-table-column> -->
       </el-table>
-			<el-pagination
+      <el-pagination @size-change="onHandleSizeChange"
-				@size-change="onHandleSizeChange"
                      @current-change="onHandleCurrentChange"
                      class="mt15"
                      :pager-count="5"
@@ -42,11 +63,11 @@
                      background
                      v-model:page-size="state.tableData.param.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
-				:total="state.tableData.total"
+                     :total="state.tableData.total">
-			>
       </el-pagination>
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -86,8 +107,8 @@ const getTableData = () => {
 	const data = [];
 	for (let i = 0; i < 10; i++) {
 		data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+			roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+			roleSign: i === 0 ? 'admin' : 'chief',
 			describe: `测试角色${i + 1}`,
 			sort: i,
 			status: true,

src/views/responseManagement/dataUpload/index.vue

@@ -1,18 +1,42 @@
 <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 :data="state.tableData.data"
-				<el-table-column type="index" label="ID" width="50" />
+                v-loading="state.tableData.loading"
-				<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
+                style="width: 100%">
-				<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
+        <el-table-column type="index"
-				<el-table-column prop="professionalTitle" label="Professional title" show-overflow-tooltip></el-table-column>
+                         label="ID"
-				<el-table-column prop="researchField" label="Research field" show-overflow-tooltip></el-table-column>
+                         width="50" />
-				<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="userName"
-				<el-table-column prop="dataDetails" label="Data details" show-overflow-tooltip></el-table-column>
+                         label="User name"
-				<el-table-column prop="dataFormat" label="Data Format" show-overflow-tooltip></el-table-column>
+                         show-overflow-tooltip></el-table-column>
-				<el-table-column prop="dataSize" label="Data size" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="Organization"
-				<el-table-column prop="uploadTime" label="Upload time" show-overflow-tooltip></el-table-column>
+                         label="Organization"
-				<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
+                         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> -->
@@ -33,8 +57,7 @@
 							</template>
 						</el-table-column> -->
       </el-table>
-			<el-pagination
+      <el-pagination @size-change="onHandleSizeChange"
-				@size-change="onHandleSizeChange"
                      @current-change="onHandleCurrentChange"
                      class="mt15"
                      :pager-count="5"
@@ -43,11 +66,11 @@
                      background
                      v-model:page-size="state.tableData.param.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
-				:total="state.tableData.total"
+                     :total="state.tableData.total">
-			>
       </el-pagination>
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -87,8 +110,8 @@ const getTableData = () => {
 	const data = [];
 	for (let i = 0; i < 10; i++) {
 		data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+			roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+			roleSign: i === 0 ? 'admin' : 'chief',
 			describe: `测试角色${i + 1}`,
 			sort: i,
 			status: true,

src/views/responseManagement/userResponse/index.vue

@@ -1,21 +1,51 @@
 <template>
   <div class="system-role-container layout-padding">
     <div class="system-role-padding layout-padding-auto layout-padding-view">
-			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin-left: 20px">
+      <el-tabs v-model="activeName"
-				<el-tab-pane label="Not reviewed" name="first">
+               class="demo-tabs"
-					<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+               @tab-click="handleClick"
-						<el-table-column type="index" label="ID" width="50" />
+               style="margin-left: 20px">
-						<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
+        <el-tab-pane label="Not reviewed"
-						<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
+                     name="first">
-						<el-table-column prop="disasterType" label="Disaster type" show-overflow-tooltip></el-table-column>
+          <el-table :data="state.tableData.data"
-						<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
+                    v-loading="state.tableData.loading"
-						<el-table-column prop="affectedCountry" label="Affected country" show-overflow-tooltip></el-table-column>
+                    style="width: 100%">
-						<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
+            <el-table-column type="index"
-						<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column>
+                             label="ID"
-						<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
+                             width="50" />
-						<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="userName"
-						<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
+                             label="User name"
-						<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column>
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Organization"
+                             label="Organization"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterType"
+                             label="Disaster type"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterKeyword"
+                             label="Disaster keyword"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="affectedCountry"
+                             label="Affected country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Longitude"
+                             label="Longitude"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Latitude"
+                             label="Latitude"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="Disaster time"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="responseTime"
+                             label="Response time"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Operate"
+                             label="Operate"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="responseStatus"
+                             label="Response status"
+                             show-overflow-tooltip></el-table-column>
 
             <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@@ -36,8 +66,7 @@
 							</template>
 						</el-table-column> -->
           </el-table>
-					<el-pagination
+          <el-pagination @size-change="onHandleSizeChange"
-						@size-change="onHandleSizeChange"
                          @current-change="onHandleCurrentChange"
                          class="mt15"
                          :pager-count="5"
@@ -46,26 +75,56 @@
                          background
                          v-model:page-size="state.tableData.param.pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
-						:total="state.tableData.total"
+                         :total="state.tableData.total">
-					>
           </el-pagination>
         </el-tab-pane>
-				<el-tab-pane label="Reviewed" name="second">
+        <el-tab-pane label="Reviewed"
-					<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
+                     name="second">
-						<el-table-column type="index" label="ID" width="50" />
+          <el-table :data="state.tableData.data"
-						<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
+                    v-loading="state.tableData.loading"
-						<el-table-column prop="Administrator" label="Administrator" show-overflow-tooltip></el-table-column>
+                    style="width: 100%">
-						<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
+            <el-table-column type="index"
-						<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
+                             label="ID"
-						<el-table-column prop="Disaster type" label="Disaster type" show-overflow-tooltip></el-table-column>
+                             width="50" />
-						<el-table-column prop="Disaster keyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="userName"
-						<el-table-column prop="Affected country" label="Affected country" show-overflow-tooltip></el-table-column>
+                             label="User name"
-						<el-table-column prop="Longitude" label="Longitude" show-overflow-tooltip></el-table-column>
+                             show-overflow-tooltip></el-table-column>
-						<el-table-column prop="Latitude" label="Latitude" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Administrator"
-						<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
+                             label="Administrator"
-						<el-table-column prop="responseTime" label="Response time" show-overflow-tooltip></el-table-column>
+                             show-overflow-tooltip></el-table-column>
-						<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Email"
-						<el-table-column prop="responseStatus" label="Response status" show-overflow-tooltip></el-table-column>
+                             label="Email"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Organization"
+                             label="Organization"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Disaster type"
+                             label="Disaster type"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Disaster keyword"
+                             label="Disaster keyword"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Affected country"
+                             label="Affected country"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Longitude"
+                             label="Longitude"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Latitude"
+                             label="Latitude"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="disasterTime"
+                             label="Disaster time"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="responseTime"
+                             label="Response time"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="Operate"
+                             label="Operate"
+                             show-overflow-tooltip></el-table-column>
+            <el-table-column prop="responseStatus"
+                             label="Response status"
+                             show-overflow-tooltip></el-table-column>
 
             <!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
 						<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
@@ -86,8 +145,7 @@
 							</template>
 						</el-table-column> -->
           </el-table>
-					<el-pagination
+          <el-pagination @size-change="onHandleSizeChange"
-						@size-change="onHandleSizeChange"
                          @current-change="onHandleCurrentChange"
                          class="mt15"
                          :pager-count="5"
@@ -96,13 +154,13 @@
                          background
                          v-model:page-size="state.tableData.param.pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
-						:total="state.tableData.total"
+                         :total="state.tableData.total">
-					>
           </el-pagination>
         </el-tab-pane>
       </el-tabs>
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -142,8 +200,8 @@ const getTableData = () => {
 	const data = [];
 	for (let i = 0; i < 10; i++) {
 		data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+			roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+			roleSign: i === 0 ? 'admin' : 'chief',
 			describe: `测试角色${i + 1}`,
 			sort: i,
 			status: true,

src/views/system/dic/dialog.vue

@@ -1,62 +1,133 @@
 <template>
   <div class="system-dic-dialog-container">
-		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
+    <el-dialog :title="state.dialog.title"
-			<el-alert title="半成品，交互过于复杂，请自行扩展！" type="warning" :closable="false" class="mb20"> </el-alert>
+               v-model="state.dialog.isShowDialog"
-			<el-form ref="dicDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
+               width="769px">
+      <el-alert title="半成品，交互过于复杂，请自行扩展！"
+                type="warning"
+                :closable="false"
+                class="mb20"> </el-alert>
+      <el-form ref="dicDialogFormRef"
+               :model="state.ruleForm"
+               size="default"
+               label-width="90px">
         <el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="字典名称">
-							<el-input v-model="state.ruleForm.dicName" placeholder="请输入字典名称" clearable></el-input>
+              <el-input v-model="state.ruleForm.dicName"
+                        placeholder="请输入字典名称"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="字段名">
-							<el-input v-model="state.ruleForm.fieldName" placeholder="请输入字段名，拼接 ruleForm.list" clearable></el-input>
+              <el-input v-model="state.ruleForm.fieldName"
+                        placeholder="请输入字段名，拼接 ruleForm.list"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-col :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="24"
+                  class="mb20">
             <el-form-item label="字典状态">
-							<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+              <el-switch v-model="state.ruleForm.status"
+                         inline-prompt
+                         active-text="启"
+                         inactive-text="禁"></el-switch>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-col :xs="24"
-						<el-row :gutter="35" v-for="(v, k) in state.ruleForm.list" :key="k">
+                  :sm="24"
-							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+                  :md="24"
+                  :lg="24"
+                  :xl="24"
+                  class="mb20">
+            <el-row :gutter="35"
+                    v-for="(v, k) in state.ruleForm.list"
+                    :key="k">
+              <el-col :xs="24"
+                      :sm="12"
+                      :md="12"
+                      :lg="12"
+                      :xl="12"
+                      class="mb20">
                 <el-form-item :prop="`list[${k}].label`">
                   <template #label>
-										<el-button type="primary" circle size="small" @click="onAddRow" v-if="k === 0">
+                    <el-button type="primary"
+                               circle
+                               size="small"
+                               @click="onAddRow"
+                               v-if="k === 0">
                       <el-icon>
                         <ele-Plus />
                       </el-icon>
                     </el-button>
-										<el-button type="danger" circle size="small" @click="onDelRow(k)" v-else>
+                    <el-button type="danger"
+                               circle
+                               size="small"
+                               @click="onDelRow(k)"
+                               v-else>
                       <el-icon>
                         <ele-Delete />
                       </el-icon>
                     </el-button>
                     <span class="ml10">字段</span>
                   </template>
-									<el-input v-model="v.label" style="width: 100%" placeholder="请输入字段名"> </el-input>
+                  <el-input v-model="v.label"
+                            style="width: 100%"
+                            placeholder="请输入字段名"> </el-input>
                 </el-form-item>
               </el-col>
-							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+              <el-col :xs="24"
-								<el-form-item label="属性" :prop="`list[${k}].value`">
+                      :sm="12"
-									<el-input v-model="v.value" style="width: 100%" placeholder="请输入属性值"> </el-input>
+                      :md="12"
+                      :lg="12"
+                      :xl="12"
+                      class="mb20">
+                <el-form-item label="属性"
+                              :prop="`list[${k}].value`">
+                  <el-input v-model="v.value"
+                            style="width: 100%"
+                            placeholder="请输入属性值"> </el-input>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-col :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="24"
+                  class="mb20">
             <el-form-item label="字典描述">
-							<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入字典描述" maxlength="150"></el-input>
+              <el-input v-model="state.ruleForm.describe"
+                        type="textarea"
+                        placeholder="请输入字典描述"
+                        maxlength="150"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button @click="onCancel"
-					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+                     size="default">取 消</el-button>
+          <el-button type="primary"
+                     @click="onSubmit"
+                     size="default">{{ state.dialog.submitTxt }}</el-button>
         </span>
       </template>
     </el-dialog>
@@ -98,9 +169,9 @@ const openDialog = (type, row) => {
     } else {
       row.list = [
         { id: Math.random(), label: 'role', value: 'admin' },
-				{ id: Math.random(), label: 'role', value: 'common' },
+        { id: Math.random(), label: 'role', value: 'chief' },
         { id: Math.random(), label: 'roleName', value: '超级管理员' },
-				{ id: Math.random(), label: 'roleName', value: '普通用户' },
+        { id: Math.random(), label: 'roleName', value: '主要管理员' },
       ];
     }
     state.ruleForm = row;

src/views/system/menu/dialog.vue

@@ -1,18 +1,26 @@
 <template>
   <div class="system-menu-dialog-container">
-		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
+    <el-dialog :title="state.dialog.title"
-			<el-form ref="menuDialogFormRef" :model="state.ruleForm" size="default" label-width="80px">
+               v-model="state.dialog.isShowDialog"
+               width="769px">
+      <el-form ref="menuDialogFormRef"
+               :model="state.ruleForm"
+               size="default"
+               label-width="80px">
         <el-row :gutter="35">
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-col :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="24"
+                  class="mb20">
             <el-form-item label="上级菜单">
-							<el-cascader
+              <el-cascader :options="state.menuData"
-								:options="state.menuData"
                            :props="{ checkStrictly: true, value: 'path', label: 'title' }"
                            placeholder="请选择上级菜单"
                            clearable
                            class="w100"
-								v-model="state.ruleForm.menuSuperior"
+                           v-model="state.ruleForm.menuSuperior">
-							>
                 <template #default="{ node, data }">
                   <span>{{ data.title }}</span>
                   <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -20,7 +28,12 @@
               </el-cascader>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-col :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="24"
+                  class="mb20">
             <el-form-item label="菜单类型">
               <el-radio-group v-model="state.ruleForm.menuType">
                 <el-radio label="menu">菜单</el-radio>
@@ -28,71 +41,146 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="菜单名称">
-							<el-input v-model="state.ruleForm.meta.title" placeholder="格式：message.router.xxx" clearable></el-input>
+              <el-input v-model="state.ruleForm.meta.title"
+                        placeholder="格式：message.router.xxx"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
           <template v-if="state.ruleForm.menuType === 'menu'">
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="路由名称">
-								<el-input v-model="state.ruleForm.name" placeholder="路由中的 name 值" clearable></el-input>
+                <el-input v-model="state.ruleForm.name"
+                          placeholder="路由中的 name 值"
+                          clearable></el-input>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="路由路径">
-								<el-input v-model="state.ruleForm.path" placeholder="路由中的 path 值" clearable></el-input>
+                <el-input v-model="state.ruleForm.path"
+                          placeholder="路由中的 path 值"
+                          clearable></el-input>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="重定向">
-								<el-input v-model="state.ruleForm.redirect" placeholder="请输入路由重定向" clearable></el-input>
+                <el-input v-model="state.ruleForm.redirect"
+                          placeholder="请输入路由重定向"
+                          clearable></el-input>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="菜单图标">
-								<IconSelector placeholder="请输入菜单图标" v-model="state.ruleForm.meta.icon" />
+                <IconSelector placeholder="请输入菜单图标"
+                              v-model="state.ruleForm.meta.icon" />
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="组件路径">
-								<el-input v-model="state.ruleForm.componentAlias" placeholder="组件路径" clearable></el-input>
+                <el-input v-model="state.ruleForm.componentAlias"
+                          placeholder="组件路径"
+                          clearable></el-input>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="链接地址">
-								<el-input
+                <el-input v-model="state.ruleForm.meta.isLink"
-									v-model="state.ruleForm.meta.isLink"
                           placeholder="外链/内嵌时链接地址（http:xxx.com）"
                           clearable
-									:disabled="!state.ruleForm.isLink"
+                          :disabled="!state.ruleForm.isLink">
-								>
                 </el-input>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="权限标识">
-								<el-select v-model="state.ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
+                <el-select v-model="state.ruleForm.meta.roles"
-									<el-option label="admin" value="admin"></el-option>
+                           multiple
-									<el-option label="common" value="common"></el-option>
+                           placeholder="取角色管理"
+                           clearable
+                           class="w100">
+                  <el-option label="admin"
+                             value="admin"></el-option>
+                  <el-option label="chief"
+                             value="chief"></el-option>
                 </el-select>
               </el-form-item>
             </el-col>
           </template>
           <template v-if="state.ruleForm.menuType === 'btn'">
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="权限标识">
-								<el-input v-model="state.ruleForm.btnPower" placeholder="请输入权限标识" clearable></el-input>
+                <el-input v-model="state.ruleForm.btnPower"
+                          placeholder="请输入权限标识"
+                          clearable></el-input>
               </el-form-item>
             </el-col>
           </template>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="菜单排序">
-							<el-input-number v-model="state.ruleForm.menuSort" controls-position="right" placeholder="请输入排序" class="w100" />
+              <el-input-number v-model="state.ruleForm.menuSort"
+                               controls-position="right"
+                               placeholder="请输入排序"
+                               class="w100" />
             </el-form-item>
           </el-col>
           <template v-if="state.ruleForm.menuType === 'menu'">
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="是否隐藏">
                 <el-radio-group v-model="state.ruleForm.meta.isHide">
                   <el-radio :label="true">隐藏</el-radio>
@@ -100,7 +188,12 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="页面缓存">
                 <el-radio-group v-model="state.ruleForm.meta.isKeepAlive">
                   <el-radio :label="true">缓存</el-radio>
@@ -108,7 +201,12 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="是否固定">
                 <el-radio-group v-model="state.ruleForm.meta.isAffix">
                   <el-radio :label="true">固定</el-radio>
@@ -116,17 +214,29 @@
                 </el-radio-group>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="是否外链">
-								<el-radio-group v-model="state.ruleForm.isLink" :disabled="state.ruleForm.meta.isIframe">
+                <el-radio-group v-model="state.ruleForm.isLink"
+                                :disabled="state.ruleForm.meta.isIframe">
                   <el-radio :label="true">是</el-radio>
                   <el-radio :label="false">否</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
-						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+            <el-col :xs="24"
+                    :sm="12"
+                    :md="12"
+                    :lg="12"
+                    :xl="12"
+                    class="mb20">
               <el-form-item label="是否内嵌">
-								<el-radio-group v-model="state.ruleForm.meta.isIframe" @change="onSelectIframeChange">
+                <el-radio-group v-model="state.ruleForm.meta.isIframe"
+                                @change="onSelectIframeChange">
                   <el-radio :label="true">是</el-radio>
                   <el-radio :label="false">否</el-radio>
                 </el-radio-group>
@@ -137,8 +247,11 @@
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button @click="onCancel"
-					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+                     size="default">取 消</el-button>
+          <el-button type="primary"
+                     @click="onSubmit"
+                     size="default">{{ state.dialog.submitTxt }}</el-button>
         </span>
       </template>
     </el-dialog>

src/views/system/role/index.vue

@@ -2,44 +2,76 @@
   <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-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>
+        <el-input v-model="state.tableData.param.search"
-				<el-button size="default" type="primary" class="ml10">
+                  size="default"
+                  placeholder="请输入角色名称"
+                  style="max-width: 180px"> </el-input>
+        <el-button size="default"
+                   type="primary"
+                   class="ml10">
           <el-icon>
             <ele-Search />
           </el-icon>
           查询
         </el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
+        <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 :data="state.tableData.data"
-				<el-table-column type="index" label="序号" width="60" />
+                v-loading="state.tableData.loading"
-				<el-table-column prop="roleName" label="角色名称" show-overflow-tooltip></el-table-column>
+                style="width: 100%">
-				<el-table-column prop="roleSign" label="角色标识" show-overflow-tooltip></el-table-column>
+        <el-table-column type="index"
-				<el-table-column prop="sort" label="排序" show-overflow-tooltip></el-table-column>
+                         label="序号"
-				<el-table-column prop="status" label="角色状态" show-overflow-tooltip>
+                         width="60" />
+        <el-table-column prop="roleName"
+                         label="角色名称"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="roleSign"
+                         label="角色标识"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="sort"
+                         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="success"
-						<el-tag type="info" v-else>禁用</el-tag>
+                    v-if="scope.row.status">启用</el-tag>
+            <el-tag type="info"
+                    v-else>禁用</el-tag>
           </template>
         </el-table-column>
-				<el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="describe"
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+                         label="角色描述"
-				<el-table-column label="操作" width="100">
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createTime"
+                         label="创建时间"
+                         show-overflow-tooltip></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 :disabled="scope.row.roleName === '超级管理员'"
-							>修改</el-button
+                       size="small"
-						>
+                       text
-						<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+                       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
+      <el-pagination @size-change="onHandleSizeChange"
-				@size-change="onHandleSizeChange"
                      @current-change="onHandleCurrentChange"
                      class="mt15"
                      :pager-count="5"
@@ -48,11 +80,11 @@
                      background
                      v-model:page-size="state.tableData.param.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
-				:total="state.tableData.total"
+                     :total="state.tableData.total">
-			>
       </el-pagination>
     </div>
-		<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
+    <RoleDialog ref="roleDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -83,8 +115,8 @@ const getTableData = () => {
   const data = [];
   for (let i = 0; i < 20; i++) {
     data.push({
-			roleName: i === 0 ? '超级管理员' : '普通用户',
+      roleName: i === 0 ? '超级管理员' : '主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+      roleSign: i === 0 ? 'admin' : 'chief',
       describe: `测试角色${i + 1}`,
       sort: i,
       status: true,

src/views/system/user/dialog.vue

@@ -1,36 +1,68 @@
 <template>
   <div class="system-user-dialog-container">
-		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
+    <el-dialog :title="state.dialog.title"
-			<el-form ref="userDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
+               v-model="state.dialog.isShowDialog"
+               width="769px">
+      <el-form ref="userDialogFormRef"
+               :model="state.ruleForm"
+               size="default"
+               label-width="90px">
         <el-row :gutter="35">
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="账户名称">
-							<el-input v-model="state.ruleForm.userName" placeholder="请输入账户名称" clearable></el-input>
+              <el-input v-model="state.ruleForm.userName"
+                        placeholder="请输入账户名称"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="用户昵称">
-							<el-input v-model="state.ruleForm.userNickname" placeholder="请输入用户昵称" clearable></el-input>
+              <el-input v-model="state.ruleForm.userNickname"
+                        placeholder="请输入用户昵称"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="关联角色">
-							<el-select v-model="state.ruleForm.roleSign" placeholder="请选择" clearable class="w100">
+              <el-select v-model="state.ruleForm.roleSign"
-								<el-option label="超级管理员" value="admin"></el-option>
+                         placeholder="请选择"
-								<el-option label="普通用户" value="common"></el-option>
+                         clearable
+                         class="w100">
+                <el-option label="超级管理员"
+                           value="admin"></el-option>
+                <el-option label="主要管理员"
+                           value="chief"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="部门">
-							<el-cascader
+              <el-cascader :options="state.deptData"
-								:options="state.deptData"
                            :props="{ checkStrictly: true, value: 'deptName', label: 'deptName' }"
                            placeholder="请选择部门"
                            clearable
                            class="w100"
-								v-model="state.ruleForm.department"
+                           v-model="state.ruleForm.department">
-							>
                 <template #default="{ node, data }">
                   <span>{{ data.deptName }}</span>
                   <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
@@ -38,50 +70,109 @@
               </el-cascader>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="手机号">
-							<el-input v-model="state.ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
+              <el-input v-model="state.ruleForm.phone"
+                        placeholder="请输入手机号"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="邮箱">
-							<el-input v-model="state.ruleForm.email" placeholder="请输入" clearable></el-input>
+              <el-input v-model="state.ruleForm.email"
+                        placeholder="请输入"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="性别">
-							<el-select v-model="state.ruleForm.sex" placeholder="请选择" clearable class="w100">
+              <el-select v-model="state.ruleForm.sex"
-								<el-option label="男" value="男"></el-option>
+                         placeholder="请选择"
-								<el-option label="女" value="女"></el-option>
+                         clearable
+                         class="w100">
+                <el-option label="男"
+                           value="男"></el-option>
+                <el-option label="女"
+                           value="女"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="账户密码">
-							<el-input v-model="state.ruleForm.password" placeholder="请输入" type="password" clearable></el-input>
+              <el-input v-model="state.ruleForm.password"
+                        placeholder="请输入"
+                        type="password"
+                        clearable></el-input>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="账户过期">
-							<el-date-picker v-model="state.ruleForm.overdueTime" type="date" placeholder="请选择" class="w100"> </el-date-picker>
+              <el-date-picker v-model="state.ruleForm.overdueTime"
+                              type="date"
+                              placeholder="请选择"
+                              class="w100"> </el-date-picker>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
+          <el-col :xs="24"
+                  :sm="12"
+                  :md="12"
+                  :lg="12"
+                  :xl="12"
+                  class="mb20">
             <el-form-item label="用户状态">
-							<el-switch v-model="state.ruleForm.status" inline-prompt active-text="启" inactive-text="禁"></el-switch>
+              <el-switch v-model="state.ruleForm.status"
+                         inline-prompt
+                         active-text="启"
+                         inactive-text="禁"></el-switch>
             </el-form-item>
           </el-col>
-					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
+          <el-col :xs="24"
+                  :sm="24"
+                  :md="24"
+                  :lg="24"
+                  :xl="24"
+                  class="mb20">
             <el-form-item label="用户描述">
-							<el-input v-model="state.ruleForm.describe" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
+              <el-input v-model="state.ruleForm.describe"
+                        type="textarea"
+                        placeholder="请输入用户描述"
+                        maxlength="150"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
-					<el-button @click="onCancel" size="default">取 消</el-button>
+          <el-button @click="onCancel"
-					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+                     size="default">取 消</el-button>
+          <el-button type="primary"
+                     @click="onSubmit"
+                     size="default">{{ state.dialog.submitTxt }}</el-button>
         </span>
       </template>
     </el-dialog>

src/views/system/user/index.vue

@@ -1,48 +1,86 @@
 <template>
   <div class="system-user-container layout-padding">
-		<el-card shadow="hover" class="layout-padding-auto">
+    <el-card shadow="hover"
+             class="layout-padding-auto">
       <div class="system-user-search mb15">
-				<el-input size="default" placeholder="请输入用户名称" style="max-width: 180px"> </el-input>
+        <el-input size="default"
-				<el-button size="default" type="primary" class="ml10">
+                  placeholder="请输入用户名称"
+                  style="max-width: 180px"> </el-input>
+        <el-button size="default"
+                   type="primary"
+                   class="ml10">
           <el-icon>
             <ele-Search />
           </el-icon>
           查询
         </el-button>
-				<el-button size="default" type="success" class="ml10" @click="onOpenAddUser('add')">
+        <el-button size="default"
+                   type="success"
+                   class="ml10"
+                   @click="onOpenAddUser('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 :data="state.tableData.data"
-				<el-table-column type="index" label="序号" width="60" />
+                v-loading="state.tableData.loading"
-				<el-table-column prop="userName" label="账户名称" show-overflow-tooltip></el-table-column>
+                style="width: 100%">
-				<el-table-column prop="userNickname" label="用户昵称" show-overflow-tooltip></el-table-column>
+        <el-table-column type="index"
-				<el-table-column prop="roleSign" label="关联角色" show-overflow-tooltip></el-table-column>
+                         label="序号"
-				<el-table-column prop="department" label="部门" show-overflow-tooltip></el-table-column>
+                         width="60" />
-				<el-table-column prop="phone" label="手机号" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="userName"
-				<el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
+                         label="账户名称"
-				<el-table-column prop="status" label="用户状态" show-overflow-tooltip>
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="userNickname"
+                         label="用户昵称"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="roleSign"
+                         label="关联角色"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="department"
+                         label="部门"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="phone"
+                         label="手机号"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="email"
+                         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="success"
-						<el-tag type="info" v-else>禁用</el-tag>
+                    v-if="scope.row.status">启用</el-tag>
+            <el-tag type="info"
+                    v-else>禁用</el-tag>
           </template>
         </el-table-column>
-				<el-table-column prop="describe" label="用户描述" show-overflow-tooltip></el-table-column>
+        <el-table-column prop="describe"
-				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
+                         label="用户描述"
-				<el-table-column label="操作" width="100">
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column prop="createTime"
+                         label="创建时间"
+                         show-overflow-tooltip></el-table-column>
+        <el-table-column label="操作"
+                         width="100">
           <template #default="scope">
-						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenEditUser('edit', scope.row)"
+            <el-button :disabled="scope.row.userName === 'admin'"
-							>修改</el-button
+                       size="small"
-						>
+                       text
-						<el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
+                       type="primary"
+                       @click="onOpenEditUser('edit', scope.row)">修改</el-button>
+            <el-button :disabled="scope.row.userName === 'admin'"
+                       size="small"
+                       text
+                       type="primary"
+                       @click="onRowDel(scope.row)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
-			<el-pagination
+      <el-pagination @size-change="onHandleSizeChange"
-				@size-change="onHandleSizeChange"
                      @current-change="onHandleCurrentChange"
                      class="mt15"
                      :pager-count="5"
@@ -51,11 +89,11 @@
                      background
                      v-model:page-size="state.tableData.param.pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
-				:total="state.tableData.total"
+                     :total="state.tableData.total">
-			>
       </el-pagination>
     </el-card>
-		<UserDialog ref="userDialogRef" @refresh="getTableData()" />
+    <UserDialog ref="userDialogRef"
+                @refresh="getTableData()" />
   </div>
 </template>
 
@@ -87,8 +125,8 @@ const getTableData = () => {
   for (let i = 0; i < 2; i++) {
     data.push({
       userName: i === 0 ? 'admin' : 'test',
-			userNickname: i === 0 ? '我是管理员' : '我是普通用户',
+      userNickname: i === 0 ? '我是管理员' : '我是主要管理员',
-			roleSign: i === 0 ? 'admin' : 'common',
+      roleSign: i === 0 ? 'admin' : 'chief',
       department: i === 0 ? ['vueNextAdmin', 'IT外包服务'] : ['vueNextAdmin', '资本控股'],
       phone: '12345678910',
       email: 'vueNextAdmin@123.com',