Merge branch 'zqq' of http://47.92.168.204:3000/VoRDM/vordm-admin into zqq
This commit is contained in:
刘旋
commit
f5f5a6247b
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "vue-next-admin-template-js",
|
||||
"name": "vordm",
|
||||
"version": "2.4.32",
|
||||
"description": "vue3 vite next admin template js setup",
|
||||
"author": "lyt_20201208",
|
||||
|
|
@ -13,12 +13,15 @@
|
|||
"@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",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.0.33",
|
||||
"qrcodejs2-fixes": "^0.0.2",
|
||||
"qs": "^6.11.1",
|
||||
"screenfull": "^6.0.2",
|
||||
"sortablejs": "^1.15.0",
|
||||
"vue": "^3.2.47",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import request from '/@/utils/request';
|
||||
import qs from 'qs'
|
||||
|
||||
/**
|
||||
* （不建议写成 request.post(xxx)，因为这样 post 时，无法 params 与 data 同时传参）
|
||||
|
|
@ -9,14 +10,14 @@ import request from '/@/utils/request';
|
|||
*/
|
||||
export function useLoginApi() {
|
||||
return {
|
||||
signInByUsername: ({tenantId, deptId, roleId, username, password, type, key, code}) => {
|
||||
signInByUsername: ({tenantId, deptId, roleId, username, password, type, key, code, grantType}) => {
|
||||
return request({
|
||||
url: '/api/blade-auth/oauth/token',
|
||||
url: '/api/system-manager/oauth/token',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Tenant-Id': tenantId,
|
||||
'Dept-Id': '',
|
||||
'Role-Id': '',
|
||||
'Dept-Id': deptId,
|
||||
'Role-Id': roleId,
|
||||
'Captcha-Key': key,
|
||||
'Captcha-Code': code,
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
|
|
@ -25,7 +26,7 @@ export function useLoginApi() {
|
|||
tenantId,
|
||||
username,
|
||||
password,
|
||||
grant_type: "captcha",
|
||||
grant_type: grantType,
|
||||
deptId,
|
||||
roleId,
|
||||
scope: "all",
|
||||
|
|
@ -34,6 +35,12 @@ export function useLoginApi() {
|
|||
});
|
||||
},
|
||||
|
||||
//获取验证码
|
||||
getCaptcha: () => request({
|
||||
url: '/api/system-manager/oauth/captcha',
|
||||
method: 'get',
|
||||
}),
|
||||
|
||||
signOut: (data) => {
|
||||
return request({
|
||||
url: '/user/signOut',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
import request from '/@/utils/request';
|
||||
import qs from 'qs';
|
||||
|
||||
export const getUserInfo = () => {
|
||||
return request({
|
||||
url: '/api/system-manager/user/info',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const resetPassword = (userIds) => {
|
||||
return request({
|
||||
url: '/api/system-manager/user/reset-password',
|
||||
method: 'post',
|
||||
params: {
|
||||
userIds,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const updatePassword = (oldPassword, newPassword, newPassword1) => {
|
||||
return request({
|
||||
url: '/api/system-manager/user/update-password',
|
||||
method: 'post',
|
||||
params: {
|
||||
oldPassword,
|
||||
newPassword,
|
||||
newPassword1,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const getButtons = () => request({
|
||||
url: '/api/system-manager/menu/buttons',
|
||||
method: 'get'
|
||||
});
|
||||
|
||||
export const refreshToken = (refresh_token, tenantId) => request({
|
||||
url: '/api/system-manager/oauth/token',
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Tenant-Id': tenantId,
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
data: qs.stringify({
|
||||
tenantId,
|
||||
refresh_token,
|
||||
grant_type: "refresh_token",
|
||||
scope: "all",
|
||||
})
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div ref="map" class="container"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import L from "leaflet";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
|
||||
const map = ref()
|
||||
|
||||
onMounted(() => {
|
||||
const homeMap = L.map(map.value, {
|
||||
preferCanvas: true,
|
||||
crs: L.CRS.EPSG4326,
|
||||
center: [29.563761, 106.550464],
|
||||
zoom: 3,
|
||||
minZoom: 1,
|
||||
maxZoom: 18,
|
||||
attributionControl: false, // 移除右下角leaflet标识
|
||||
zoomControl: false
|
||||
});
|
||||
const IMG_C = "http://t0.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
|
||||
// const CIA_C = "http://t0.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=";
|
||||
const TK_KEY = "dc8182ebeca998e22154d404aa3c0c17";
|
||||
L.tileLayer(IMG_C + TK_KEY, { maxZoom: 20, tileSize: 256, zoomOffset: 1 }).addTo(homeMap);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
|
@ -73,7 +73,7 @@ import { useUserInfo } from '/@/stores/userInfo';
|
|||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import mittBus from '/@/utils/mitt';
|
||||
import { Session, Local } from '/@/utils/storage';
|
||||
|
||||
import { refreshToken } from '/@/api/system/user.js'
|
||||
// 引入组件
|
||||
const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
|
||||
const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
|
||||
|
|
@ -83,11 +83,13 @@ const router = useRouter();
|
|||
const stores = useUserInfo();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { userInfos } = storeToRefs(stores);
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { themeConfig, website } = storeToRefs(storesThemeConfig);
|
||||
|
||||
const searchRef = ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
disabledSize: 'large',
|
||||
setIntervalId: null
|
||||
});
|
||||
|
||||
// 设置分割样式
|
||||
|
|
@ -145,6 +147,7 @@ const onHandleCommandClick = (path) => {
|
|||
.then(async () => {
|
||||
// 清除缓存/token等
|
||||
Session.clear();
|
||||
clearInterval(state.setIntervalId);
|
||||
// 使用 reload 时，不需要调用 resetRoute() 重置路由
|
||||
window.location.reload();
|
||||
})
|
||||
|
|
@ -176,6 +179,20 @@ onMounted(() => {
|
|||
if (Local.get('themeConfig')) {
|
||||
initI18nOrSize('globalComponentSize', 'disabledSize');
|
||||
}
|
||||
//刷新token
|
||||
state.setIntervalId =setInterval(() => {
|
||||
const dateTime = Session.get('token-time');
|
||||
const rt = Session.get('refresh-token');
|
||||
const now = new Date().getTime();
|
||||
if((now - dateTime) / 1000 > website.value.tokenTime){
|
||||
// 刷新token
|
||||
refreshToken(rt, website.value.tenantId).then(res=>{
|
||||
Session.set('token', res.access_token);
|
||||
Session.set('token-time', new Date().getTime());
|
||||
Session.set('refresh-token', res.refresh_token);
|
||||
})
|
||||
}
|
||||
},10000);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export const dynamicRoutes = [
|
|||
{
|
||||
path: '/responseManagement',
|
||||
name: 'responseManagement',
|
||||
component: () => import('/@/views/responseManagement/responseManagement.vue'),
|
||||
component: () => import('/@/views/responseManagement/index.vue'),
|
||||
redirect: '/responseManagement/userResponse',
|
||||
meta: {
|
||||
title: 'Response management',
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ import { defineStore } from 'pinia';
|
|||
*/
|
||||
export const useThemeConfig = defineStore('themeConfig', {
|
||||
state: () => ({
|
||||
website: {
|
||||
// 开启验证码模式
|
||||
captchaMode: true,
|
||||
tokenTime: 3000,
|
||||
tenantId: '595035',
|
||||
},
|
||||
themeConfig: {
|
||||
// 是否开启布局配置抽屉
|
||||
isDrawer: false,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import Cookies from 'js-cookie';
|
||||
import { Session } from '/@/utils/storage';
|
||||
|
||||
import { getUserInfo, getButtons } from '/@/api/system/user.js'
|
||||
/**
|
||||
* 用户信息
|
||||
* @methods setUserInfos 设置用户信息
|
||||
|
|
@ -26,47 +25,67 @@ export const useUserInfo = defineStore('userInfo', {
|
|||
this.userInfos = userInfos;
|
||||
}
|
||||
},
|
||||
async Buttons() {
|
||||
return new Promise((resolve) => {
|
||||
getButtons().then(data => {
|
||||
console.log(data)
|
||||
resolve(this.formatBtns(data));
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
formatBtns(data) {
|
||||
let map = [];
|
||||
data.forEach(item => {
|
||||
map.push(item.code)
|
||||
//判断是否存在子菜单
|
||||
if (item.children) {
|
||||
map = map.concat(this.formatBtns(item.children));
|
||||
}
|
||||
})
|
||||
return map;
|
||||
},
|
||||
// 模拟接口数据
|
||||
// https://gitee.com/lyt-top/vue-next-admin/issues/I5F1HP
|
||||
async getApiUserInfo() {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
// 模拟数据，请求接口时，记得删除多余代码及对应依赖的引入
|
||||
const userName = Cookies.get('userName');
|
||||
// 模拟数据
|
||||
let defaultRoles = [];
|
||||
let defaultAuthBtnList = [];
|
||||
// admin 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
|
||||
let adminRoles = ['admin'];
|
||||
// admin 按钮权限标识
|
||||
let adminAuthBtnList = ['btn.add', 'btn.del', 'btn.edit', 'btn.link'];
|
||||
// test 页面权限标识，对应路由 meta.roles，用于控制路由的显示/隐藏
|
||||
let testRoles = ['common'];
|
||||
// test 按钮权限标识
|
||||
let testAuthBtnList = ['btn.add', 'btn.link'];
|
||||
// 不同用户模拟不同的用户权限
|
||||
if (userName === 'admin') {
|
||||
defaultRoles = adminRoles;
|
||||
defaultAuthBtnList = adminAuthBtnList;
|
||||
} else {
|
||||
defaultRoles = testRoles;
|
||||
defaultAuthBtnList = testAuthBtnList;
|
||||
}
|
||||
// 用户信息模拟数据
|
||||
// 获取用户信息
|
||||
getUserInfo().then((user) => {
|
||||
const arr = [];
|
||||
arr.push(user.roleName);
|
||||
const userInfos = {
|
||||
userName: userName,
|
||||
photo:
|
||||
userName === 'admin'
|
||||
? 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
|
||||
: 'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
userName: user.account,
|
||||
photo: user.account === 'admin'
|
||||
? 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
|
||||
: 'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
time: new Date().getTime(),
|
||||
roles: defaultRoles,
|
||||
authBtnList: defaultAuthBtnList,
|
||||
roles: arr,
|
||||
authBtnList: [],
|
||||
...user
|
||||
};
|
||||
// 存储用户信息到浏览器缓存
|
||||
Session.set('userInfo', userInfos);
|
||||
resolve(userInfos);
|
||||
}, 0);
|
||||
resolve(userInfos)
|
||||
// 获取权限按钮
|
||||
// this.Buttons().then((res2) => {
|
||||
// // 用户信息模拟数据
|
||||
// const userInfos = {
|
||||
// userName: user.account,
|
||||
// photo: user.account === 'admin'
|
||||
// ? 'https://img2.baidu.com/it/u=1978192862,2048448374&fm=253&fmt=auto&app=138&f=JPEG?w=504&h=500'
|
||||
// : 'https://img2.baidu.com/it/u=2370931438,70387529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
||||
// time: new Date().getTime(),
|
||||
// roles: arr,
|
||||
// authBtnList: res2,
|
||||
// ...user
|
||||
// };
|
||||
// // 存储用户信息到浏览器缓存
|
||||
// Session.set('userInfo', userInfos);
|
||||
// resolve(userInfos)
|
||||
// })
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,9 +18,10 @@ const service = axios.create({
|
|||
// 添加请求拦截器
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
config.headers['Authorization'] = 'Basic Vm9SRE1BZG1pbjp2b3JkbV9hZG1pbl9zZWNyZXQ=';
|
||||
// 在发送请求之前做些什么 token
|
||||
if (Session.get('token')) {
|
||||
config.headers['Authorization'] = `${Session.get('token')}`;
|
||||
config.headers['Blade-Auth'] = `Bearer ${Session.get('token')}`;
|
||||
}
|
||||
return config;
|
||||
},
|
||||
|
|
@ -35,7 +36,7 @@ service.interceptors.response.use(
|
|||
(response) => {
|
||||
// 对响应数据做点什么
|
||||
const res = response.data;
|
||||
if (res.code && res.code !== 0) {
|
||||
if (res.code && res.code !== 200) {
|
||||
// `token` 过期或者账号已在别处登录
|
||||
if (res.code === 401 || res.code === 4001) {
|
||||
Session.clear(); // 清除浏览器全部临时缓存
|
||||
|
|
@ -43,10 +44,12 @@ service.interceptors.response.use(
|
|||
ElMessageBox.alert('你已被登出，请重新登录', '提示', {})
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
} else if(res.code === 400){
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
return Promise.reject(service.interceptors.response);
|
||||
} else {
|
||||
return res;
|
||||
return res.data || res;
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
|
|
@ -56,7 +59,8 @@ service.interceptors.response.use(
|
|||
} else if (error.message == 'Network Error') {
|
||||
ElMessage.error('网络连接错误');
|
||||
} else {
|
||||
if (error.response.data) ElMessage.error(error.response.statusText);
|
||||
if( error.response.data.error_description ) ElMessage.error(error.response.data.error_description);
|
||||
//if (error.response.data) ElMessage.error(error.response.statusText);
|
||||
else ElMessage.error('接口路径找不到');
|
||||
}
|
||||
return Promise.reject(error);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,239 @@
|
|||
<template>
|
||||
<div>
|
||||
multimediaData
|
||||
</div>
|
||||
</template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10">
|
||||
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择爬虫类型下拉框 -->
|
||||
<el-select v-model="value_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>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
const value_disastertype = ref('');
|
||||
const value_disastertime = ref('');
|
||||
const value_crawlertype = ref('');
|
||||
// const value_crawlerstatus = ref('');
|
||||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
//选择爬虫类型下拉框
|
||||
|
||||
const options_crawlertype = [
|
||||
{
|
||||
value: 'Bing',
|
||||
label: 'Bing',
|
||||
},
|
||||
{
|
||||
value: 'Twitter',
|
||||
label: 'Twitter',
|
||||
},
|
||||
{
|
||||
value: 'Baidu',
|
||||
label: 'Baidu',
|
||||
},
|
||||
{
|
||||
value: 'Weibo',
|
||||
label: 'Weibo',
|
||||
},
|
||||
];
|
||||
|
||||
//选择爬虫状态下拉框
|
||||
// const options_crawlerstatus = [
|
||||
// {
|
||||
// value: 'Not crawled',
|
||||
// label: 'Not crawled',
|
||||
// },
|
||||
// {
|
||||
// value: 'Crawled',
|
||||
// label: 'Crawled',
|
||||
// },
|
||||
// ];
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,318 @@
|
|||
<template>
|
||||
<div>
|
||||
remoteSensingData
|
||||
<div class="container">
|
||||
<div class="rsSelect">
|
||||
<el-tabs v-model="state.activeName"
|
||||
@tab-click="handleClick">
|
||||
<el-tab-pane label="Search condition"
|
||||
name="first">
|
||||
|
||||
<el-card class="box-card">
|
||||
<span>Select time range</span>
|
||||
<div class="block">
|
||||
<span class="demonstration">Start time</span>
|
||||
<el-date-picker style="width: 70%;"
|
||||
v-model="state.startTime"
|
||||
type="datetime"
|
||||
placeholder="Select start time"
|
||||
:shortcuts="shortcuts" />
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<span class="demonstration">End time</span>
|
||||
<el-date-picker style="width: 70%;"
|
||||
v-model="state.endTime"
|
||||
type="datetime"
|
||||
placeholder="Select end time"
|
||||
:shortcuts="shortcuts" />
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card class="box-card"
|
||||
style="margin-top: 3%;">
|
||||
<span>Select a region</span>
|
||||
<el-scrollbar wrap-class="list"
|
||||
view-class="view-box"
|
||||
:native="false">
|
||||
<div class="coordinateContainer"
|
||||
v-for="(coordinate, i) in state.coordinateList">{{
|
||||
// coordinate
|
||||
'Lat:' + coordinate.lat.toFixed("3") + ', Lng:' + coordinate.lng.toFixed("3")
|
||||
}}
|
||||
|
||||
<el-button class="el-icon-edit"
|
||||
size="small"></el-button>
|
||||
<el-button class="el-icon-close"
|
||||
size="small"></el-button>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-button @click="addCoordinate">Add coordinates</el-button>
|
||||
<el-button @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"
|
||||
multiple
|
||||
:render-after-expand="false"
|
||||
show-checkbox
|
||||
placeholder="Select satellite type" />
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
|
||||
<el-button @click="startCrawl">Start Crawl</el-button>
|
||||
<el-button>Cancel</el-button>
|
||||
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
<Map id="map"></Map>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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',
|
||||
label: 'landsat',
|
||||
// children: [{
|
||||
// value: 1 - 1,
|
||||
// label: 'LANDSAT_8_C1'
|
||||
// },
|
||||
// {
|
||||
// value: 1 - 2,
|
||||
// label: 'LANDSAT_ETM_C1'
|
||||
// },
|
||||
// {
|
||||
// value: 1 - 3,
|
||||
// label: 'LANDSAT_TM_C1'
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
{
|
||||
value: 'Sentinel',
|
||||
label: 'Sentinel',
|
||||
// children: [{
|
||||
// value: 2 - 1,
|
||||
// label: 'Sentinel - 2',
|
||||
// children: [{
|
||||
// value: 2 - 1 - 1,
|
||||
// label: 'S2MSI2A'
|
||||
// }]
|
||||
// },
|
||||
// {
|
||||
// value: 2 - 2,
|
||||
// label: 'Sentinel - 1',
|
||||
// children: [{
|
||||
// value: 2 - 2 - 1,
|
||||
// label: 'SLC'
|
||||
// }]
|
||||
// }
|
||||
// ]
|
||||
},
|
||||
{
|
||||
value: '国产系列卫星',
|
||||
label: '国产系列卫星',
|
||||
children: [
|
||||
{
|
||||
value: 'GF - 1',
|
||||
label: 'GF - 1',
|
||||
},
|
||||
{
|
||||
value: 'GF - 2',
|
||||
label: 'GF - 2',
|
||||
},
|
||||
{
|
||||
value: 'GF - 3',
|
||||
label: 'GF - 3',
|
||||
},
|
||||
{
|
||||
value: 'GF - 4',
|
||||
label: 'GF - 4',
|
||||
},
|
||||
{
|
||||
value: 'GF - 6',
|
||||
label: 'GF - 6',
|
||||
},
|
||||
{
|
||||
value: 'ZY - 3',
|
||||
label: 'ZY - 3',
|
||||
},
|
||||
{
|
||||
value: 'ZY - 302',
|
||||
label: 'ZY - 302',
|
||||
},
|
||||
{
|
||||
value: 'ZY - 02C',
|
||||
label: 'ZY - 02C',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: '欧比特珠海一号系列卫星',
|
||||
label: '欧比特珠海一号系列卫星',
|
||||
children: [
|
||||
{
|
||||
value: 'OVS - 2A',
|
||||
label: 'OVS - 2A',
|
||||
},
|
||||
{
|
||||
value: 'OVS - 3A',
|
||||
label: 'OVS - 3A',
|
||||
},
|
||||
{
|
||||
value: 'OVS - 1A',
|
||||
label: 'OVS - 1A',
|
||||
},
|
||||
{
|
||||
value: 'OVS - 1B',
|
||||
label: 'OVS - 1B',
|
||||
},
|
||||
{
|
||||
value: 'OHS - 2A',
|
||||
label: 'OHS - 2A',
|
||||
},
|
||||
{
|
||||
value: 'OHS - 2B',
|
||||
label: 'OHS - 2B',
|
||||
},
|
||||
{
|
||||
value: 'OHS - 2C',
|
||||
label: 'OHS - 2C',
|
||||
},
|
||||
{
|
||||
value: 'OHS - 2D',
|
||||
label: 'OHS - 2D',
|
||||
},
|
||||
],
|
||||
}
|
||||
])
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '1 month ago',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '3 months ago',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 90)
|
||||
return date
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '6 months ago',
|
||||
value: () => {
|
||||
const date = new Date()
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 180)
|
||||
return date
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
// 添加坐标点
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
// 清空坐标点
|
||||
const clearCoordinate = () => {
|
||||
state.coordinateList = [];
|
||||
state.startTime = '';
|
||||
state.endTime = '';
|
||||
}
|
||||
|
||||
const startCrawl = () => {
|
||||
console.log("start time:", state.startTime)
|
||||
console.log("end time:", state.endTime)
|
||||
console.log("addCoord:", state.addCoord)
|
||||
console.log("satelliteSelected:", state.satelliteSelected)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 2% 1%;
|
||||
.rsSelect {
|
||||
float: left;
|
||||
border: 1px solid blue;
|
||||
width: 30%;
|
||||
height: 53rem;
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.satelliteSelect {
|
||||
width: 75%;
|
||||
margin: 10px 0 10px 10px;
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
margin: 10px 0 0 0;
|
||||
color: black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.el-tree-node__label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin: 2% 0;
|
||||
.demonstration {
|
||||
float: left;
|
||||
height: 20px;
|
||||
line-height: 40px;
|
||||
margin: 0 3%;
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.coordinateContainer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
#map {
|
||||
width: 70%;
|
||||
height: 53rem;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,224 @@
|
|||
<template>
|
||||
<div>
|
||||
dataRetrieval
|
||||
</div>
|
||||
</template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10">
|
||||
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择数据类型下拉框 -->
|
||||
<el-select v-model="value_datatype" size="default" placeholder="Select data type" class="ml10">
|
||||
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择是否可视化下拉框 -->
|
||||
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
|
||||
<el-option v-for="item in options_visualization" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
|
||||
<el-button size="default" type="success" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Upload
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button> -->
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
|
||||
<!-- <el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
const value_disastertype = ref('');
|
||||
const value_disastertime = ref('');
|
||||
const value_datatype = ref('');
|
||||
const value_crawlerstatus = ref('');
|
||||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
//选择数据类型下拉框
|
||||
const options_datatype = [
|
||||
{
|
||||
value: 'Word cloud',
|
||||
label: 'Word cloud',
|
||||
},
|
||||
{
|
||||
value: 'Hotspot area',
|
||||
label: 'Hotspot area',
|
||||
},
|
||||
];
|
||||
|
||||
//选择是否可视化下拉框
|
||||
// const options_visualization = [
|
||||
// {
|
||||
// value: 'Yes',
|
||||
// label: 'Yes',
|
||||
// },
|
||||
// {
|
||||
// value: 'No',
|
||||
// label: 'No',
|
||||
// },
|
||||
// ];
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,240 @@
|
|||
<template>
|
||||
<div>
|
||||
dataUpload
|
||||
</div>
|
||||
</template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<!-- 选择灾害类型下拉框 -->
|
||||
<el-select v-model="value_disastertype" size="default" placeholder="Select disaster type">
|
||||
<el-option v-for="item in options_disastertype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择灾害时间下拉框 -->
|
||||
<el-date-picker v-model="value_disastertime" type="date" placeholder="Select disaster time" class="ml10" size="default" />
|
||||
<!-- 选择灾害事件下拉框 -->
|
||||
<el-select v-model="value_disasterevent" size="default" placeholder="Select disaster event" class="ml10">
|
||||
<el-option v-for="item in options_disasterevent" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
|
||||
<!-- 选择数据类型下拉框 -->
|
||||
<el-select v-model="value_datatype" size="default" placeholder="Select data type" class="ml10">
|
||||
<el-option v-for="item in options_datatype" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
<!-- 选择是否可视化下拉框 -->
|
||||
<!-- <el-select v-model="value_visualization" size="default" placeholder="Visualization" class="ml10">
|
||||
<el-option v-for="item in options_visualization" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select> -->
|
||||
|
||||
<!-- <el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input> -->
|
||||
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Search
|
||||
</el-button>
|
||||
|
||||
<el-button size="default" type="success" class="ml10">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
Upload
|
||||
</el-button>
|
||||
|
||||
<!-- <el-button size="default" type="success" class="ml10" @click="onOpenAddRole('add')">
|
||||
<el-icon>
|
||||
<ele-FolderAdd />
|
||||
</el-icon>
|
||||
新增角色
|
||||
</el-button> -->
|
||||
</div>
|
||||
<!-- <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="vordmId" label="VoRDM ID" show-overflow-tooltip />
|
||||
<el-table-column prop="disasterKeyword" label="Disaster keyword" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="disasterTime" label="Disaster time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlertype" label="Crawler type" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="crawlerStatus" label="Crawler status" show-overflow-tooltip></el-table-column> -->
|
||||
|
||||
<!-- 需修改弹出框页面 -->
|
||||
<!-- <el-table-column label="Crawler operation" width="100">
|
||||
<template #default="scope">
|
||||
<el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)">Start</el-button>
|
||||
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">Stop</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
|
||||
<!-- <el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="systemRole">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
const value_disastertype = ref('');
|
||||
const value_disastertime = ref('');
|
||||
const value_datatype = ref('');
|
||||
const value_crawlerstatus = ref('');
|
||||
|
||||
//选择灾害类型下拉框
|
||||
const options_disastertype = [
|
||||
{
|
||||
value: 'Earthquake',
|
||||
label: 'Earthquake',
|
||||
},
|
||||
{
|
||||
value: 'Hurricane',
|
||||
label: 'Hurricane',
|
||||
},
|
||||
{
|
||||
value: 'Flood',
|
||||
label: 'Flood',
|
||||
},
|
||||
{
|
||||
value: 'Volcano',
|
||||
label: 'Volcano',
|
||||
},
|
||||
{
|
||||
value: 'Drought',
|
||||
label: 'Drought',
|
||||
},
|
||||
{
|
||||
value: 'Landslide',
|
||||
label: 'Landslide',
|
||||
},
|
||||
];
|
||||
//选择数据类型下拉框
|
||||
const options_datatype = [
|
||||
{
|
||||
value: 'Basic data',
|
||||
label: 'Basic data',
|
||||
},
|
||||
{
|
||||
value: 'News picture',
|
||||
label: 'News picture',
|
||||
},
|
||||
{
|
||||
value: 'Disaster report',
|
||||
label: 'Disaster report',
|
||||
},
|
||||
{
|
||||
value: 'Disaster mapping',
|
||||
label: 'Disaster mapping',
|
||||
},
|
||||
{
|
||||
value: 'Word cloud',
|
||||
label: 'Word cloud',
|
||||
},
|
||||
{
|
||||
value: 'Hotspot area',
|
||||
label: 'Hotspot area',
|
||||
},
|
||||
];
|
||||
|
||||
//选择是否可视化下拉框
|
||||
const options_visualization = [
|
||||
{
|
||||
value: 'Yes',
|
||||
label: 'Yes',
|
||||
},
|
||||
{
|
||||
value: 'No',
|
||||
label: 'No',
|
||||
},
|
||||
];
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<el-form size="large" class="login-content-form">
|
||||
<el-form-item class="login-animation1">
|
||||
<el-input text placeholder="用户名 admin 或不输均为 common" v-model="state.ruleForm.userName" clearable autocomplete="off">
|
||||
<el-input text placeholder="Please input username or email" v-model="state.ruleForm.userName" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation2">
|
||||
<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="密码：123456" v-model="state.ruleForm.password" autocomplete="off">
|
||||
<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="Please input password" v-model="state.ruleForm.password" autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
|
||||
</template>
|
||||
|
|
@ -22,32 +22,34 @@
|
|||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation3">
|
||||
<el-form-item class="login-animation3" v-if="state.captchaMode">
|
||||
<el-col :span="15">
|
||||
<el-input text maxlength="4" placeholder="请输入验证码" v-model="state.ruleForm.code" clearable autocomplete="off">
|
||||
<el-input text maxlength="5" placeholder="Please input validate code" v-model="state.ruleForm.code" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Position /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="1"></el-col>
|
||||
<el-col :span="8">
|
||||
<el-button class="login-content-code" v-waves>1234</el-button>
|
||||
<el-col :span="8" style="width: 132px; height: 48px;">
|
||||
<!-- <el-button class="login-content-code" v-waves>1234</el-button> -->
|
||||
<img class="login-content-code-img" alt="" :src="state.captchaUrl" @click="getCaptchaCode" />
|
||||
</el-col>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation4">
|
||||
<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn" :loading="state.loading.signIn">
|
||||
<span>登 录</span>
|
||||
<span>LOGIN</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup name="loginAccount">
|
||||
import { reactive, computed } from 'vue';
|
||||
import { reactive, computed, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import Cookies from 'js-cookie';
|
||||
import md5 from 'js-md5';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import { initFrontEndControlRoutes } from '/@/router/frontEnd';
|
||||
|
|
@ -55,71 +57,112 @@ import { initBackEndControlRoutes } from '/@/router/backEnd';
|
|||
import { Session } from '/@/utils/storage';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { NextLoading } from '/@/utils/loading';
|
||||
|
||||
import { useLoginApi } from '/@/api/login';
|
||||
// 定义变量内容
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { themeConfig, website } = storeToRefs(storesThemeConfig);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const loginApi = useLoginApi();
|
||||
|
||||
const state = reactive({
|
||||
isShowPassword: false,
|
||||
ruleForm: {
|
||||
userName: 'admin',
|
||||
password: '123456',
|
||||
code: '1234',
|
||||
},
|
||||
loading: {
|
||||
signIn: false,
|
||||
},
|
||||
isShowPassword: false,
|
||||
ruleForm: {
|
||||
//租户ID
|
||||
tenantId: website.value.tenantId,
|
||||
//用户名
|
||||
userName: "",
|
||||
//密码
|
||||
password: "",
|
||||
//账号类型
|
||||
type: "account",
|
||||
//验证码key
|
||||
key: "",
|
||||
//验证码code
|
||||
code: "",
|
||||
},
|
||||
loading: {
|
||||
signIn: false,
|
||||
},
|
||||
captchaMode: website.value.captchaMode,
|
||||
captchaUrl: "",
|
||||
});
|
||||
|
||||
const getCaptchaCode = async () => {
|
||||
const res = await loginApi.getCaptcha()
|
||||
state.captchaUrl = res.image;
|
||||
state.ruleForm.key = res.key;
|
||||
};
|
||||
onMounted(() => {
|
||||
if(state.captchaMode) {
|
||||
getCaptchaCode();
|
||||
}
|
||||
});
|
||||
// 时间获取
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
// 登录
|
||||
const onSignIn = async () => {
|
||||
const onSignIn = () => {
|
||||
//判断用户是否输入用户名和密码
|
||||
if (state.ruleForm.userName === "") {
|
||||
ElMessage.error("请输入用户名");
|
||||
return;
|
||||
}
|
||||
if (state.ruleForm.password === "") {
|
||||
ElMessage.error("请输入密码");
|
||||
return;
|
||||
}
|
||||
state.loading.signIn = true;
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set('token', Math.random().toString(36).substr(0));
|
||||
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
||||
Cookies.set('userName', state.ruleForm.userName);
|
||||
if (!themeConfig.value.isRequestRoutes) {
|
||||
// 前端控制路由，2、请注意执行顺序
|
||||
const isNoPower = await initFrontEndControlRoutes();
|
||||
signInSuccess(isNoPower);
|
||||
} else {
|
||||
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
|
||||
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
|
||||
const isNoPower = await initBackEndControlRoutes();
|
||||
// 执行完 initBackEndControlRoutes，再执行 signInSuccess
|
||||
signInSuccess(isNoPower);
|
||||
}
|
||||
loginApi.signInByUsername({
|
||||
tenantId: state.ruleForm.tenantId,
|
||||
deptId: '',
|
||||
roleId: '',
|
||||
username: state.ruleForm.userName,
|
||||
password: md5(state.ruleForm.password),
|
||||
type: state.ruleForm.type,
|
||||
key: state.ruleForm.key,
|
||||
code: state.ruleForm.code,
|
||||
grantType: state.captchaMode ? "captcha" : "password"
|
||||
}).then((res) => {
|
||||
Session.set('token', res.access_token);
|
||||
Session.set('token-time', new Date().getTime());
|
||||
Session.set('refresh-token', res.refresh_token);
|
||||
if (themeConfig.value.isRequestRoutes) {
|
||||
initBackEndControlRoutes().then(() => {
|
||||
signInSuccess()
|
||||
}).catch(() => {state.loading.signIn = false;});
|
||||
} else {
|
||||
initFrontEndControlRoutes().then(() => {
|
||||
signInSuccess()
|
||||
}).catch(() => {state.loading.signIn = false;});
|
||||
}
|
||||
}).catch(()=>{
|
||||
if(state.captchaMode) {
|
||||
getCaptchaCode()
|
||||
}
|
||||
state.loading.signIn = false;
|
||||
})
|
||||
};
|
||||
// 登录成功后的跳转
|
||||
const signInSuccess = (isNoPower) => {
|
||||
if (isNoPower) {
|
||||
ElMessage.warning('抱歉，您没有登录权限');
|
||||
Session.clear();
|
||||
const signInSuccess = () => {
|
||||
// 初始化登录成功时间问候语
|
||||
let currentTimeInfo = currentTime.value;
|
||||
// 登录成功，跳到转首页
|
||||
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
|
||||
if (route.query?.redirect) {
|
||||
router.push({
|
||||
path: route.query?.redirect,
|
||||
query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
|
||||
});
|
||||
} else {
|
||||
// 初始化登录成功时间问候语
|
||||
let currentTimeInfo = currentTime.value;
|
||||
// 登录成功，跳到转首页
|
||||
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
|
||||
if (route.query?.redirect) {
|
||||
router.push({
|
||||
path: route.query?.redirect,
|
||||
query: Object.keys(route.query?.params).length > 0 ? JSON.parse(route.query?.params) : '',
|
||||
});
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
// 登录成功提示
|
||||
const signInText = '欢迎回来！';
|
||||
ElMessage.success(`${currentTimeInfo}，${signInText}`);
|
||||
// 添加 loading，防止第一次进入界面时出现短暂空白
|
||||
NextLoading.start();
|
||||
router.push('/');
|
||||
}
|
||||
// 登录成功提示
|
||||
const signInText = 'Welcome Back!';
|
||||
ElMessage.success(`${currentTimeInfo}，${signInText}`);
|
||||
// 添加 loading，防止第一次进入界面时出现短暂空白
|
||||
NextLoading.start();
|
||||
state.loading.signIn = false;
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div class="login-right-warp-main-form">
|
||||
<div v-if="!state.isScan">
|
||||
<el-tabs v-model="state.tabsActiveName">
|
||||
<el-tab-pane label="账号密码登录" name="account">
|
||||
<el-tab-pane label="Account Login" name="account">
|
||||
<Account />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="手机号登录" name="mobile">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,155 @@
|
|||
<template>
|
||||
<div>
|
||||
administrator
|
||||
</div>
|
||||
</template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="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="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> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="systemRole">
|
||||
import type { TabsPaneContext } from 'element-plus';
|
||||
|
||||
const activeName = ref('first');
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
|
||||
//复制内容
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,156 @@
|
|||
<template>
|
||||
<div>
|
||||
dataUpload
|
||||
</div>
|
||||
</template>
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="professionalTitle" label="Professional title" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="researchField" label="Research field" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Email" label="Email" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataDetails" label="Data details" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataFormat" label="Data Format" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="dataSize" label="Data size" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="uploadTime" label="Upload time" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Operate" label="Operate" show-overflow-tooltip></el-table-column>
|
||||
|
||||
<!-- <el-table-column prop="describe" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column> -->
|
||||
<!-- <el-table-column prop="status" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.status">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="scope">
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button :disabled="scope.row.roleName === '超级管理员'" size="small" text type="primary" @click="onRowDel(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="onHandleSizeChange"
|
||||
@current-change="onHandleCurrentChange"
|
||||
class="mt15"
|
||||
:pager-count="5"
|
||||
:page-sizes="[10, 20, 30]"
|
||||
v-model:current-page="state.tableData.param.pageNum"
|
||||
background
|
||||
v-model:page-size="state.tableData.param.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="state.tableData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="systemRole">
|
||||
import type { TabsPaneContext } from 'element-plus';
|
||||
|
||||
const activeName = ref('first');
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
|
||||
//复制内容
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type) => {
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type, row) => {
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
// 删除角色
|
||||
const onRowDel = (row) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
})
|
||||
.then(() => {
|
||||
getTableData();
|
||||
ElMessage.success('删除成功');
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,211 @@
|
|||
<template>
|
||||
<div>
|
||||
userResponse
|
||||
</div>
|
||||
</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-tab-pane label="Not reviewed" name="first">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="userName" label="User name" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="Organization" label="Organization" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="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> -->
|
||||
<!-- <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-tab-pane label="Reviewed" name="second">
|
||||
<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
|
||||
<el-table-column type="index" label="ID" width="50" />
|
||||
<el-table-column prop="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>
|
||||
<RoleDialog ref="roleDialogRef" @refresh="getTableData()" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="systemRole">
|
||||
import type { TabsPaneContext } from 'element-plus';
|
||||
|
||||
const activeName = ref('first');
|
||||
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event);
|
||||
};
|
||||
|
||||
//复制内容
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/system/role/dialog.vue'));
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
const state = reactive({
|
||||
tableData: {
|
||||
data: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
// 初始化表格数据
|
||||
const getTableData = () => {
|
||||
state.tableData.loading = true;
|
||||
const data = [];
|
||||
for (let i = 0; i < 10; i++) {
|
||||
data.push({
|
||||
roleName: i === 0 ? '超级管理员' : '普通用户',
|
||||
roleSign: i === 0 ? 'admin' : 'common',
|
||||
describe: `测试角色${i + 1}`,
|
||||
sort: i,
|
||||
status: true,
|
||||
createTime: new Date().toLocaleString(),
|
||||
});
|
||||
}
|
||||
state.tableData.data = data;
|
||||
state.tableData.total = state.tableData.data.length;
|
||||
setTimeout(() => {
|
||||
state.tableData.loading = false;
|
||||
}, 500);
|
||||
};
|
||||
// 打开新增角色弹窗
|
||||
// const onOpenAddRole = (type) => {
|
||||
// roleDialogRef.value.openDialog(type);
|
||||
// };
|
||||
// 打开修改角色弹窗
|
||||
// const onOpenEditRole = (type, row) => {
|
||||
// roleDialogRef.value.openDialog(type, row);
|
||||
// };
|
||||
// 删除角色
|
||||
// const onRowDel = (row) => {
|
||||
// ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.roleName}”，是否继续?`, '提示', {
|
||||
// confirmButtonText: '确认',
|
||||
// cancelButtonText: '取消',
|
||||
// type: 'warning',
|
||||
// })
|
||||
// .then(() => {
|
||||
// getTableData();
|
||||
// ElMessage.success('删除成功');
|
||||
// })
|
||||
// .catch(() => {});
|
||||
// };
|
||||
// 分页改变
|
||||
const onHandleSizeChange = (val) => {
|
||||
state.tableData.param.pageSize = val;
|
||||
getTableData();
|
||||
};
|
||||
// 分页改变
|
||||
const onHandleCurrentChange = (val) => {
|
||||
state.tableData.param.pageNum = val;
|
||||
getTableData();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 0px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.system-role-container {
|
||||
.system-role-padding {
|
||||
padding: 15px;
|
||||
.el-table {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ const viteConfig = defineConfig((mode) => {
|
|||
hmr: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://gitee.com',
|
||||
target: 'http://192.168.31.14:9090',
|
||||
ws: true,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
|
|
|
|||
|
|
@ -1021,6 +1021,11 @@ js-cookie@^3.0.1:
|
|||
resolved "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
|
||||
integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
|
||||
|
||||
js-md5@^0.7.3:
|
||||
version "0.7.3"
|
||||
resolved "https://registry.npmmirror.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
|
||||
integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==
|
||||
|
||||
js-sdsl@^4.1.4:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.npmmirror.com/js-sdsl/-/js-sdsl-4.4.0.tgz#8b437dbe642daa95760400b602378ed8ffea8430"
|
||||
|
|
|
|||
Loading…
Reference in New Issue