Compare commits
3 Commits
12f41faa40
...
fb5ad57dc1
| Author | SHA1 | Date | |
|---|---|---|---|
| fb5ad57dc1 | |||
| bb1acb50c1 | |||
| c59e2cf505 |
25
.env
Normal file
25
.env
Normal file
@ -0,0 +1,25 @@
|
||||
# 所有环境都会加载的配置
|
||||
|
||||
# 项目名称
|
||||
VITE_APP_TITLE=智慧湿地管理平台
|
||||
|
||||
# 项目描述
|
||||
VITE_APP_DESC=科技赋能生态保护 智慧守护绿色家园
|
||||
|
||||
# 版本号
|
||||
VITE_APP_VERSION=1.0.0
|
||||
|
||||
# 版权信息
|
||||
VITE_APP_COPYRIGHT=Copyright © 2025 智慧湿地管理平台 All Rights Reserved.
|
||||
|
||||
# 是否启用 gzip 压缩
|
||||
VITE_BUILD_GZIP=false
|
||||
|
||||
# 是否启用 brotli 压缩
|
||||
VITE_BUILD_BROTLI=false
|
||||
|
||||
# 是否删除 console
|
||||
VITE_DROP_CONSOLE=true
|
||||
|
||||
# 后端 API 的基础 URL
|
||||
VITE_API_BASE_URL=http://localhost:3000
|
||||
14
.env.development
Normal file
14
.env.development
Normal file
@ -0,0 +1,14 @@
|
||||
# 开发环境
|
||||
VITE_NODE_ENV=development
|
||||
|
||||
# API 基础路径
|
||||
VITE_API_BASE_URL=http://localhost:3000
|
||||
|
||||
# 项目基础路径
|
||||
VITE_BASE_URL=/
|
||||
|
||||
# Mock API 路径
|
||||
VITE_MOCK_API=true
|
||||
|
||||
# 是否开启调试工具
|
||||
VITE_DEV_TOOLS=true
|
||||
14
.env.production
Normal file
14
.env.production
Normal file
@ -0,0 +1,14 @@
|
||||
# 生产环境
|
||||
VITE_NODE_ENV=production
|
||||
|
||||
# API 基础路径 - 实际项目中替换为真实的后端接口地址
|
||||
VITE_API_BASE_URL=https://api.your-domain.com
|
||||
|
||||
# 项目基础路径
|
||||
VITE_BASE_URL=/
|
||||
|
||||
# Mock API 路径
|
||||
VITE_MOCK_API=false
|
||||
|
||||
# 是否开启调试工具
|
||||
VITE_DEV_TOOLS=false
|
||||
14
.env.test
Normal file
14
.env.test
Normal file
@ -0,0 +1,14 @@
|
||||
# 测试环境
|
||||
VITE_NODE_ENV=test
|
||||
|
||||
# API 基础路径
|
||||
VITE_API_BASE_URL=https://test-api.your-domain.com
|
||||
|
||||
# 项目基础路径
|
||||
VITE_BASE_URL=/
|
||||
|
||||
# Mock API 路径
|
||||
VITE_MOCK_API=false
|
||||
|
||||
# 是否开启调试工具
|
||||
VITE_DEV_TOOLS=true
|
||||
@ -8,6 +8,6 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
7
package-lock.json
generated
7
package-lock.json
generated
@ -15,7 +15,8 @@
|
||||
"json-server": "^1.0.0-beta.3",
|
||||
"pinia": "^2.3.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
"vue-router": "^4.5.0",
|
||||
"wetlandguard-admin": "file:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.13.0",
|
||||
@ -2750,6 +2751,10 @@
|
||||
"typescript": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/wetlandguard-admin": {
|
||||
"resolved": "",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "5.6.1",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
|
||||
|
||||
@ -16,7 +16,8 @@
|
||||
"json-server": "^1.0.0-beta.3",
|
||||
"pinia": "^2.3.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
"vue-router": "^4.5.0",
|
||||
"wetlandguard-admin": "file:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.13.0",
|
||||
|
||||
20
src/api/login/index.js
Normal file
20
src/api/login/index.js
Normal file
@ -0,0 +1,20 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 用户登录
|
||||
* @param {Object} data - 登录参数
|
||||
* @param {string} data.username - 用户名
|
||||
* @param {string} data.password - 密码
|
||||
* @returns {Promise} 返回包含token和用户信息的Promise
|
||||
*/
|
||||
export function login(data) {
|
||||
return request.post('/api/users/login', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 退出登录
|
||||
* @returns {Promise}
|
||||
*/
|
||||
export function logout() {
|
||||
return request.post('/api/users/logout')
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
import request from './request';
|
||||
|
||||
// 日常报告接口
|
||||
export const dailyReportApi = {
|
||||
// 获取日常报告列表
|
||||
getList: (params: any) => request.get('/report/daily/list', { params }),
|
||||
|
||||
// 获取日常报告详情
|
||||
getDetail: (id: number) => request.get(`/report/daily/${id}`),
|
||||
|
||||
// 创建日常报告
|
||||
create: (data: any) => request.post('/report/daily', data),
|
||||
|
||||
// 更新日常报告
|
||||
update: (id: number, data: any) => request.put(`/report/daily/${id}`, data),
|
||||
|
||||
// 删除日常报告
|
||||
delete: (id: number) => request.delete(`/report/daily/${id}`),
|
||||
|
||||
// 导出日常报告
|
||||
export: (id: number) => request.get(`/report/daily/export/${id}`, { responseType: 'blob' })
|
||||
};
|
||||
|
||||
// 分析报告接口
|
||||
export const analysisReportApi = {
|
||||
// 获取分析报告列表
|
||||
getList: (params: any) => request.get('/report/analysis/list', { params }),
|
||||
|
||||
// 获取分析报告详情
|
||||
getDetail: (id: number) => request.get(`/report/analysis/${id}`),
|
||||
|
||||
// 创建分析报告
|
||||
create: (data: any) => request.post('/report/analysis', data),
|
||||
|
||||
// 更新分析报告
|
||||
update: (id: number, data: any) => request.put(`/report/analysis/${id}`, data),
|
||||
|
||||
// 删除分析报告
|
||||
delete: (id: number) => request.delete(`/report/analysis/${id}`),
|
||||
|
||||
// 导出分析报告
|
||||
export: (id: number) => request.get(`/report/analysis/export/${id}`, { responseType: 'blob' }),
|
||||
|
||||
// 获取监测数据统计
|
||||
getMonitorStats: (params: any) => request.get('/report/analysis/monitor-stats', { params }),
|
||||
|
||||
// 获取物种数据统计
|
||||
getSpeciesStats: (params: any) => request.get('/report/analysis/species-stats', { params })
|
||||
};
|
||||
@ -1,35 +0,0 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: '/api',
|
||||
timeout: 5000
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
const token = localStorage.getItem('token')
|
||||
if (token) {
|
||||
config.headers.Authorization = `Bearer ${token}`
|
||||
}
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
const { data } = response
|
||||
return data
|
||||
},
|
||||
(error) => {
|
||||
ElMessage.error(error.message || '请求失败')
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export default request
|
||||
52
src/api/user/index.js
Normal file
52
src/api/user/index.js
Normal file
@ -0,0 +1,52 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取用户列表
|
||||
* @returns {Promise} 返回用户列表数据
|
||||
*/
|
||||
export function getUserList() {
|
||||
return request.get('/api/users')
|
||||
}
|
||||
|
||||
/**
|
||||
* 新增用户
|
||||
* @param {Object} data - 用户数据
|
||||
* @param {string} data.username - 用户名（必选）
|
||||
* @param {string} data.password - 密码（必选）
|
||||
* @param {string} data.role_id - 角色ID（必选）
|
||||
* @param {string} [data.real_name] - 真实姓名（可选）
|
||||
* @param {string} [data.email] - 邮箱（可选）
|
||||
* @param {string} [data.phone] - 手机号（可选）
|
||||
* @param {string} [data.status] - 状态（可选）
|
||||
* @param {string} [data.expire_time] - 过期时间（可选）
|
||||
* @returns {Promise} 返回创建结果
|
||||
*/
|
||||
export function createUser(data) {
|
||||
return request.post('/api/users', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 编辑用户
|
||||
* @param {string|number} id - 用户ID
|
||||
* @param {Object} data - 用户数据
|
||||
* @param {string} [data.real_name] - 真实姓名（可选）
|
||||
* @param {string} [data.email] - 邮箱（可选）
|
||||
* @param {string} [data.phone] - 手机号（可选）
|
||||
* @param {string} [data.role_id] - 角色ID（可选）
|
||||
* @param {string} [data.status] - 状态（可选）
|
||||
* @param {string} [data.expire_time] - 过期时间（可选）
|
||||
* @param {string} [data.password] - 新密码（可选）
|
||||
* @returns {Promise} 返回更新结果
|
||||
*/
|
||||
export function updateUser(id, data) {
|
||||
return request.put(`/api/users/${id}`, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除用户
|
||||
* @param {string|number} id - 用户ID
|
||||
* @returns {Promise} 返回删除结果
|
||||
*/
|
||||
export function deleteUser(id) {
|
||||
return request.delete(`/api/users/${id}`)
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps<{ msg: string }>()
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Learn more about IDE Support for Vue in the
|
||||
<a
|
||||
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
|
||||
target="_blank"
|
||||
>Vue Docs Scaling up Guide</a
|
||||
>.
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
@ -1,15 +1,23 @@
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
qualityTrend: string;
|
||||
indicators: {
|
||||
name: string;
|
||||
value: number;
|
||||
threshold: number;
|
||||
status: string;
|
||||
}[];
|
||||
};
|
||||
}>();
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
return (
|
||||
value.qualityTrend &&
|
||||
Array.isArray(value.indicators) &&
|
||||
value.indicators.every(
|
||||
(indicator) =>
|
||||
indicator.name &&
|
||||
typeof indicator.value === 'number' &&
|
||||
typeof indicator.threshold === 'number' &&
|
||||
indicator.status
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const props = defineProps<{
|
||||
data: any;
|
||||
type: 'line' | 'bar';
|
||||
title?: string;
|
||||
}>();
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: [Object, Array],
|
||||
required: true
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
validator: (value) => ['line', 'bar'].includes(value),
|
||||
required: true
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: false
|
||||
}
|
||||
});
|
||||
|
||||
let chart: echarts.ECharts | null = null;
|
||||
let chart = null;
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById('monitorChart');
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
const props = defineProps({
|
||||
data: {
|
||||
diversity: number;
|
||||
richness: number;
|
||||
distribution: any[];
|
||||
};
|
||||
}>();
|
||||
type: Object,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
return (
|
||||
typeof value.diversity === 'number' &&
|
||||
typeof value.richness === 'number' &&
|
||||
Array.isArray(value.distribution)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const diversityLevel = computed(() => {
|
||||
const value = props.data.diversity;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
@ -45,7 +45,7 @@ watch(
|
||||
}
|
||||
);
|
||||
|
||||
const handleSelect = (key: string) => {
|
||||
const handleSelect = (key) => {
|
||||
router.push(key);
|
||||
};
|
||||
|
||||
|
||||
@ -1,25 +1,14 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
interface LogEntry {
|
||||
id: number;
|
||||
type: string;
|
||||
user: string;
|
||||
action: string;
|
||||
ip: string;
|
||||
status: string;
|
||||
detail: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
export const useSystemLogStore = defineStore('systemLog', {
|
||||
state: () => ({
|
||||
logs: [] as LogEntry[]
|
||||
logs: []
|
||||
}),
|
||||
|
||||
actions: {
|
||||
// 添加日志
|
||||
addLog(log: Omit<LogEntry, 'id' | 'createTime'>) {
|
||||
const newLog: LogEntry = {
|
||||
addLog(log) {
|
||||
const newLog = {
|
||||
...log,
|
||||
id: Date.now(),
|
||||
createTime: new Date().toLocaleString('zh-CN', {
|
||||
72
src/stores/user.js
Normal file
72
src/stores/user.js
Normal file
@ -0,0 +1,72 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { login as loginApi, logout as logoutApi } from '@/api/login'
|
||||
|
||||
// 安全的 JSON 解析函数
|
||||
const safeJSONParse = (str, defaultValue = null) => {
|
||||
if (!str || str === 'undefined' || str === 'null') {
|
||||
return defaultValue
|
||||
}
|
||||
try {
|
||||
return JSON.parse(str)
|
||||
} catch (error) {
|
||||
console.warn('JSON解析错误，使用默认值:', error)
|
||||
return defaultValue
|
||||
}
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: () => {
|
||||
// 从 localStorage 获取数据
|
||||
const token = localStorage.getItem('token')
|
||||
const userInfoStr = localStorage.getItem('userInfo')
|
||||
|
||||
return {
|
||||
token: token || null,
|
||||
userInfo: safeJSONParse(userInfoStr)
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
async login(username, password) {
|
||||
try {
|
||||
// 调用登录接口
|
||||
const { token, userInfo } = await loginApi({ username, password })
|
||||
|
||||
// 保存token和用户信息
|
||||
this.token = token
|
||||
this.userInfo = userInfo
|
||||
|
||||
// 持久化存储
|
||||
localStorage.setItem('token', token)
|
||||
localStorage.setItem('userInfo', JSON.stringify(userInfo))
|
||||
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('登录失败:', error)
|
||||
return false
|
||||
}
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
async logout() {
|
||||
try {
|
||||
await logoutApi()
|
||||
} catch (error) {
|
||||
console.error('退出登录失败:', error)
|
||||
} finally {
|
||||
// 无论是否成功调用退出接口，都清除本地存储
|
||||
this.token = null
|
||||
this.userInfo = null
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('userInfo')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getters: {
|
||||
isLoggedIn: (state) => !!state.token,
|
||||
username: (state) => state.userInfo?.username,
|
||||
userRole: (state) => state.userInfo?.role
|
||||
}
|
||||
})
|
||||
@ -1,44 +0,0 @@
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
interface UserState {
|
||||
token: string | null;
|
||||
userInfo: {
|
||||
username: string;
|
||||
role: string;
|
||||
} | null;
|
||||
}
|
||||
|
||||
export const useUserStore = defineStore('user', {
|
||||
state: (): UserState => ({
|
||||
token: localStorage.getItem('token'),
|
||||
userInfo: null
|
||||
}),
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
async login(username: string, password: string) {
|
||||
if (username === 'admin' && password === '123456') {
|
||||
this.token = 'demo-token';
|
||||
this.userInfo = {
|
||||
username: 'admin',
|
||||
role: '管理员'
|
||||
};
|
||||
localStorage.setItem('token', this.token);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 退出登录
|
||||
logout() {
|
||||
this.token = null;
|
||||
this.userInfo = null;
|
||||
localStorage.removeItem('token');
|
||||
}
|
||||
},
|
||||
|
||||
getters: {
|
||||
isLoggedIn: (state) => !!state.token,
|
||||
username: (state) => state.userInfo?.username
|
||||
}
|
||||
})
|
||||
68
src/utils/format.js
Normal file
68
src/utils/format.js
Normal file
@ -0,0 +1,68 @@
|
||||
/**
|
||||
* 格式化日期时间
|
||||
* @param {string|number|Date} time 需要格式化的时间
|
||||
* @param {string} [format='YYYY-MM-DD HH:mm:ss'] 格式化的格式
|
||||
* @returns {string} 格式化后的时间字符串
|
||||
*/
|
||||
export function formatDateTime(time, format = 'YYYY-MM-DD HH:mm:ss') {
|
||||
if (!time) return '';
|
||||
|
||||
const date = new Date(time);
|
||||
|
||||
if (isNaN(date.getTime())) return '';
|
||||
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('YYYY', year)
|
||||
.replace('MM', month)
|
||||
.replace('DD', day)
|
||||
.replace('HH', hours)
|
||||
.replace('mm', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化日期
|
||||
* @param {string|number|Date} time 需要格式化的时间
|
||||
* @returns {string} 格式化后的日期字符串 YYYY-MM-DD
|
||||
*/
|
||||
export function formatDate(time) {
|
||||
return formatDateTime(time, 'YYYY-MM-DD');
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间为相对时间
|
||||
* @param {string|number|Date} time 需要格式化的时间
|
||||
* @returns {string} 相对时间描述
|
||||
*/
|
||||
export function formatRelativeTime(time) {
|
||||
if (!time) return '';
|
||||
|
||||
const date = new Date(time);
|
||||
if (isNaN(date.getTime())) return '';
|
||||
|
||||
const now = new Date();
|
||||
const diff = now - date;
|
||||
const seconds = Math.floor(diff / 1000);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
|
||||
if (days > 30) {
|
||||
return formatDateTime(time);
|
||||
} else if (days > 0) {
|
||||
return `${days}天前`;
|
||||
} else if (hours > 0) {
|
||||
return `${hours}小时前`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}分钟前`;
|
||||
} else {
|
||||
return '刚刚';
|
||||
}
|
||||
}
|
||||
156
src/utils/request.js
Normal file
156
src/utils/request.js
Normal file
@ -0,0 +1,156 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { useUserStore } from '../stores/user'
|
||||
import router from '../router'
|
||||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
// 从环境变量获取基础URL，如果没有则使用默认值
|
||||
baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
|
||||
timeout: 15000, // 请求超时时间
|
||||
headers: {
|
||||
'Content-Type': 'application/json;charset=utf-8'
|
||||
}
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
const userStore = useUserStore()
|
||||
const token = userStore.token
|
||||
|
||||
// 如果有token，添加到请求头
|
||||
if (token) {
|
||||
config.headers = config.headers || {}
|
||||
config.headers['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
return config
|
||||
},
|
||||
(error) => {
|
||||
console.error('请求错误：', error)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
service.interceptors.response.use(
|
||||
(response) => {
|
||||
const res = response.data
|
||||
|
||||
// 如果响应成功
|
||||
if (res.success) {
|
||||
return res
|
||||
}
|
||||
|
||||
// 处理特定错误码
|
||||
switch (res.code) {
|
||||
case 401:
|
||||
handleUnauthorized()
|
||||
break
|
||||
case 403:
|
||||
ElMessage.error('没有权限访问该资源')
|
||||
break
|
||||
case 500:
|
||||
console.error('服务器错误详情：', res)
|
||||
ElMessage.error(res.message || '服务器错误，请稍后重试')
|
||||
break
|
||||
default:
|
||||
ElMessage.error(res.message || '请求失败')
|
||||
}
|
||||
|
||||
return Promise.reject(new Error(res.message || '请求失败'))
|
||||
},
|
||||
(error) => {
|
||||
console.error('响应错误详情：', {
|
||||
status: error.response?.status,
|
||||
statusText: error.response?.statusText,
|
||||
data: error.response?.data,
|
||||
headers: error.response?.headers,
|
||||
config: {
|
||||
url: error.config?.url,
|
||||
method: error.config?.method,
|
||||
headers: error.config?.headers,
|
||||
params: error.config?.params
|
||||
}
|
||||
})
|
||||
|
||||
// 处理网络错误
|
||||
if (!error.response) {
|
||||
ElMessage.error('网络错误，请检查您的网络连接')
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
// 处理HTTP状态码错误
|
||||
const status = error.response.status
|
||||
switch (status) {
|
||||
case 401:
|
||||
handleUnauthorized()
|
||||
break
|
||||
case 403:
|
||||
ElMessage.error('没有权限访问该资源')
|
||||
break
|
||||
case 404:
|
||||
ElMessage.error('请求的资源不存在')
|
||||
break
|
||||
case 500:
|
||||
ElMessage.error('服务器错误，请稍后重试')
|
||||
break
|
||||
default:
|
||||
ElMessage.error(`请求失败：${error.message}`)
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// 处理未授权情况
|
||||
const handleUnauthorized = () => {
|
||||
const userStore = useUserStore()
|
||||
userStore.logout() // 清除用户信息
|
||||
|
||||
// 跳转到登录页，并携带当前页面路径
|
||||
const currentPath = router.currentRoute.value.fullPath
|
||||
router.push({
|
||||
path: '/login',
|
||||
query: {
|
||||
redirect: currentPath
|
||||
}
|
||||
})
|
||||
|
||||
ElMessage.error('登录已过期，请重新登录')
|
||||
}
|
||||
|
||||
// 封装请求方法
|
||||
export const request = {
|
||||
get(url, config) {
|
||||
return service.get(url, config)
|
||||
},
|
||||
|
||||
post(url, data, config) {
|
||||
return service.post(url, data, config)
|
||||
},
|
||||
|
||||
put(url, data, config) {
|
||||
return service.put(url, data, config)
|
||||
},
|
||||
|
||||
delete(url, config) {
|
||||
return service.delete(url, config)
|
||||
},
|
||||
|
||||
// 上传文件的专用方法
|
||||
upload(url, file, config) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
|
||||
return service.post(url, formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
...config
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default request
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { markRaw } from 'vue'
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import * as echarts from "echarts";
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
@ -42,7 +42,7 @@ const getCurrentTime = () => {
|
||||
.replace(/\//g, "-");
|
||||
};
|
||||
|
||||
const handleLogin = async (formEl: any) => {
|
||||
const handleLogin = async (formEl) => {
|
||||
if (!formEl) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
@ -67,7 +67,7 @@ const handleLogin = async (formEl: any) => {
|
||||
});
|
||||
|
||||
// 获取重定向地址
|
||||
const redirect = route.query.redirect as string;
|
||||
const redirect = route.query.redirect;
|
||||
router.push(redirect || "/dashboard");
|
||||
} else {
|
||||
// 记录失败日志
|
||||
@ -92,7 +92,7 @@ const handleLogin = async (formEl: any) => {
|
||||
};
|
||||
|
||||
// 添加输入框获得焦点时的处理函数
|
||||
const handleFocus = (prop: "username" | "password") => {
|
||||
const handleFocus = (prop) => {
|
||||
if (formRef.value) {
|
||||
// 清除对应字段的验证错误
|
||||
formRef.value.clearValidate(prop);
|
||||
@ -161,7 +161,7 @@ const handleFocus = (prop: "username" | "password") => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/variables.scss";
|
||||
@use "../../styles/variables.scss" as *;
|
||||
|
||||
.login-container {
|
||||
height: 100vh;
|
||||
|
||||
@ -1,19 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Monitor, Warning, TrendCharts } from "@element-plus/icons-vue";
|
||||
|
||||
interface EnvData {
|
||||
id: number;
|
||||
location: string;
|
||||
temperature: number;
|
||||
humidity: number;
|
||||
waterQuality: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
const tableData = ref<EnvData[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
location: "A区监测点",
|
||||
@ -90,9 +81,9 @@ const initChart = () => {
|
||||
textStyle: {
|
||||
color: "#666",
|
||||
},
|
||||
formatter: function (params: any) {
|
||||
formatter: function (params) {
|
||||
let result = `${params[0].axisValue}<br/>`;
|
||||
params.forEach((item: any) => {
|
||||
params.forEach((item) => {
|
||||
result += `${item.marker} ${item.seriesName}: ${item.value}${
|
||||
item.seriesName.includes("温度")
|
||||
? "°C"
|
||||
@ -247,33 +238,30 @@ const initChart = () => {
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
// 监听窗口大小变化
|
||||
// 处理窗口大小变化
|
||||
window.addEventListener("resize", () => {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
|
||||
// 添加导出相关的数据和方法
|
||||
// 导出相关数据
|
||||
const exportDialogVisible = ref(false);
|
||||
const exportForm = reactive({
|
||||
timeRange: [] as string[],
|
||||
format: "excel",
|
||||
timeRange: [],
|
||||
dataType: ["temperature", "humidity", "waterQuality"],
|
||||
format: "excel",
|
||||
});
|
||||
|
||||
const handleExport = () => {
|
||||
exportDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 处理导出确认
|
||||
const handleExportConfirm = () => {
|
||||
console.log("导出数据:", exportForm);
|
||||
ElMessage.success("数据导出成功");
|
||||
exportDialogVisible.value = false;
|
||||
};
|
||||
|
||||
// 初始化迷你图表
|
||||
const initMiniChart = (el: HTMLElement, data: number[]) => {
|
||||
const initMiniChart = (el, data) => {
|
||||
const chart = echarts.init(el);
|
||||
chart.setOption({
|
||||
const option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
@ -357,7 +345,8 @@ const initMiniChart = (el: HTMLElement, data: number[]) => {
|
||||
},
|
||||
padding: [4, 8],
|
||||
},
|
||||
});
|
||||
};
|
||||
chart.setOption(option);
|
||||
|
||||
// 监听卡片hover事件
|
||||
const card = el.closest(".env-card");
|
||||
@ -378,15 +367,12 @@ const initMiniChart = (el: HTMLElement, data: number[]) => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化所有迷你图表
|
||||
envStats.value.forEach((stat, index) => {
|
||||
const el = document.getElementById(`miniChart${index}`);
|
||||
if (el) {
|
||||
initMiniChart(el, stat.trend);
|
||||
}
|
||||
});
|
||||
// 原有的图表初始化
|
||||
initChart();
|
||||
// 初始化所有迷你图表
|
||||
const chartEls = document.querySelectorAll(".env-chart");
|
||||
chartEls.forEach((el, index) => {
|
||||
initMiniChart(el, envStats.value[index].trend);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -482,7 +468,7 @@ onMounted(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.env-container {
|
||||
.env-card {
|
||||
|
||||
@ -1,18 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
interface SpeciesData {
|
||||
id: number;
|
||||
name: string;
|
||||
type: string;
|
||||
count: number;
|
||||
location: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
const tableData = ref<SpeciesData[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "东方白鹳",
|
||||
@ -148,7 +139,7 @@ const initChart = () => {
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: function(params: any) {
|
||||
formatter: function(params) {
|
||||
return `${params.name}\n${params.percent.toFixed(1)}%`;
|
||||
},
|
||||
color: '#666',
|
||||
@ -172,10 +163,10 @@ const initChart = () => {
|
||||
animationDurationUpdate: 500,
|
||||
animationType: 'expansion',
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDelay: function(idx: number) {
|
||||
animationDelay: function(idx) {
|
||||
return idx * 100;
|
||||
},
|
||||
animationDelayUpdate: function(idx: number) {
|
||||
animationDelayUpdate: function(idx) {
|
||||
return idx * 100;
|
||||
},
|
||||
emphasis: {
|
||||
@ -214,7 +205,7 @@ onMounted(() => {
|
||||
// 添加导出相关的数据和方法
|
||||
const exportDialogVisible = ref(false);
|
||||
const exportForm = reactive({
|
||||
timeRange: [] as string[],
|
||||
timeRange: [],
|
||||
format: "excel",
|
||||
});
|
||||
|
||||
@ -306,7 +297,7 @@ const handleExportConfirm = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.species-container {
|
||||
padding: 20px;
|
||||
|
||||
@ -1,18 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
interface PointData {
|
||||
id: number;
|
||||
name: string;
|
||||
location: string;
|
||||
type: string;
|
||||
description: string;
|
||||
status: string;
|
||||
lastPatrolTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<PointData[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "A区-1号点位",
|
||||
@ -56,8 +46,8 @@ const handleAdd = () => {
|
||||
|
||||
// 添加搜索相关
|
||||
const searchText = ref("");
|
||||
const typeFilter = ref<string[]>([]);
|
||||
const statusFilter = ref<string[]>([]);
|
||||
const typeFilter = ref([]);
|
||||
const statusFilter = ref([]);
|
||||
|
||||
// 过滤表格数据
|
||||
const filteredTableData = computed(() => {
|
||||
@ -90,9 +80,9 @@ const resetFilters = () => {
|
||||
|
||||
// 添加编辑相关
|
||||
const isEdit = ref(false);
|
||||
const currentPoint = ref<PointData | null>(null);
|
||||
const currentPoint = ref(null);
|
||||
|
||||
const handleEdit = (row: PointData) => {
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true;
|
||||
currentPoint.value = row;
|
||||
formData.name = row.name;
|
||||
@ -145,16 +135,16 @@ const paginatedData = computed(() => {
|
||||
return filteredTableData.value.slice(start, end);
|
||||
});
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val: number) => {
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val;
|
||||
};
|
||||
|
||||
const handleDelete = (row: PointData) => {
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm("确认删除该巡护点位？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
@ -328,7 +318,7 @@ const pointTypes = [
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.point-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,20 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, computed, reactive } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
|
||||
interface RecordData {
|
||||
id: number;
|
||||
taskTitle: string;
|
||||
patroller: string;
|
||||
route: string;
|
||||
findings: string;
|
||||
images: string[];
|
||||
status: string;
|
||||
completedTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<RecordData[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
taskTitle: "A区日常巡查",
|
||||
@ -38,9 +27,9 @@ const tableData = ref<RecordData[]>([
|
||||
]);
|
||||
|
||||
const dialogVisible = ref(false);
|
||||
const currentRecord = ref<RecordData | null>(null);
|
||||
const currentRecord = ref(null);
|
||||
|
||||
const handleView = (row: RecordData) => {
|
||||
const handleView = (row) => {
|
||||
currentRecord.value = row;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
@ -61,7 +50,7 @@ const filteredTableData = computed(() => {
|
||||
|
||||
const exportDialogVisible = ref(false);
|
||||
const exportForm = reactive({
|
||||
timeRange: [] as string[],
|
||||
timeRange: [],
|
||||
format: "excel",
|
||||
types: ["basic", "findings", "images"],
|
||||
});
|
||||
@ -85,12 +74,12 @@ const paginatedData = computed(() => {
|
||||
return filteredTableData.value.slice(start, end);
|
||||
});
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val: number) => {
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val;
|
||||
};
|
||||
</script>
|
||||
@ -242,7 +231,7 @@ const handleCurrentChange = (val: number) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.record-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,19 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, reactive, computed } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
interface TaskData {
|
||||
id: number;
|
||||
title: string;
|
||||
area: string;
|
||||
assignee: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
startTime: string;
|
||||
endTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<TaskData[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "A区日常巡查",
|
||||
@ -36,8 +25,8 @@ const tableData = ref<TaskData[]>([
|
||||
},
|
||||
]);
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
const getStatusType = (status) => {
|
||||
const map = {
|
||||
进行中: "success",
|
||||
待开始: "info",
|
||||
已完成: "primary",
|
||||
@ -46,8 +35,8 @@ const getStatusType = (status: string) => {
|
||||
return map[status] || "info";
|
||||
};
|
||||
|
||||
const getPriorityType = (priority: string) => {
|
||||
const map: Record<string, string> = {
|
||||
const getPriorityType = (priority) => {
|
||||
const map = {
|
||||
高: "danger",
|
||||
中: "warning",
|
||||
低: "info",
|
||||
@ -55,7 +44,7 @@ const getPriorityType = (priority: string) => {
|
||||
return map[priority] || "info";
|
||||
};
|
||||
|
||||
// 添加新建任务相关
|
||||
// 新建任务相关
|
||||
const newTaskDialogVisible = ref(false);
|
||||
const newTaskForm = reactive({
|
||||
title: "",
|
||||
@ -67,24 +56,23 @@ const newTaskForm = reactive({
|
||||
description: "",
|
||||
});
|
||||
|
||||
// 添加任务详情相关
|
||||
// 任务详情相关
|
||||
const detailDialogVisible = ref(false);
|
||||
const currentTask = ref<TaskData | null>(null);
|
||||
const currentTask = ref(null);
|
||||
|
||||
// 添加任务状态更新相关
|
||||
const handleView = (row: TaskData) => {
|
||||
// 任务状态更新相关
|
||||
const handleView = (row) => {
|
||||
currentTask.value = row;
|
||||
detailDialogVisible.value = true;
|
||||
};
|
||||
|
||||
const handleComplete = (row: TaskData) => {
|
||||
const handleComplete = (row) => {
|
||||
ElMessageBox.confirm("确认完成该巡护任务？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 这里添加完成任务的逻辑
|
||||
ElMessage.success("任务已完成");
|
||||
})
|
||||
.catch(() => {
|
||||
@ -92,14 +80,13 @@ const handleComplete = (row: TaskData) => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = (row: TaskData) => {
|
||||
const handleCancel = (row) => {
|
||||
ElMessageBox.confirm("确认取消该巡护任务？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 这里添加取消任务的逻辑
|
||||
ElMessage.success("任务已取消");
|
||||
})
|
||||
.catch(() => {
|
||||
@ -107,14 +94,8 @@ const handleCancel = (row: TaskData) => {
|
||||
});
|
||||
};
|
||||
|
||||
// 添加任务时间线数据
|
||||
interface TimelineItem {
|
||||
type: 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
||||
timestamp: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
const taskTimeline = ref<TimelineItem[]>([
|
||||
// 任务时间线数据
|
||||
const taskTimeline = ref([
|
||||
{
|
||||
type: 'primary',
|
||||
timestamp: '2024-03-20 09:00',
|
||||
@ -137,8 +118,8 @@ const taskTimeline = ref<TimelineItem[]>([
|
||||
},
|
||||
]);
|
||||
|
||||
// 添加表单验证规则
|
||||
const validateTime = (rule: any, value: string, callback: Function) => {
|
||||
// 表单验证规则
|
||||
const validateTime = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
callback(new Error('请选择时间'));
|
||||
return;
|
||||
@ -199,18 +180,18 @@ const resetForm = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 添加关闭弹窗时重置表单
|
||||
// 关闭弹窗时重置表单
|
||||
const handleDialogClose = () => {
|
||||
resetForm();
|
||||
};
|
||||
|
||||
// 添加搜索和筛选相关
|
||||
// 搜索和筛选相关
|
||||
const searchText = ref("");
|
||||
const statusFilter = ref<string[]>([]);
|
||||
const priorityFilter = ref<string[]>([]);
|
||||
const dateRange = ref<[string, string]>(['', '']);
|
||||
const statusFilter = ref([]);
|
||||
const priorityFilter = ref([]);
|
||||
const dateRange = ref(['', '']);
|
||||
|
||||
// 添加统计数据
|
||||
// 统计数据
|
||||
const statistics = computed(() => {
|
||||
const total = tableData.value.length;
|
||||
const statusCount = {
|
||||
@ -226,8 +207,8 @@ const statistics = computed(() => {
|
||||
};
|
||||
|
||||
tableData.value.forEach(task => {
|
||||
statusCount[task.status as keyof typeof statusCount]++;
|
||||
priorityCount[task.priority as keyof typeof priorityCount]++;
|
||||
statusCount[task.status]++;
|
||||
priorityCount[task.priority]++;
|
||||
});
|
||||
|
||||
return {
|
||||
@ -546,7 +527,7 @@ const resetFilters = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.task-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { markRaw } from "vue";
|
||||
import {
|
||||
|
||||
@ -1,43 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, computed } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { ElMessageBox, ElMessage } from "element-plus";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
interface AnalysisReport {
|
||||
id: number;
|
||||
title: string;
|
||||
type: "species" | "environment"; // 分析类型：物种/环境
|
||||
timeRange: {
|
||||
// 分析时间范围
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
dataSource: {
|
||||
// 数据来源
|
||||
type: string;
|
||||
points: string[]; // 监测点位
|
||||
}[];
|
||||
analysis: {
|
||||
summary: string; // 分析总结
|
||||
trends: {
|
||||
// 趋势分析
|
||||
indicator: string; // 指标
|
||||
trend: string; // 变化趋势
|
||||
data: any[]; // 数据
|
||||
}[];
|
||||
abnormal: {
|
||||
// 异常分析
|
||||
type: string;
|
||||
description: string;
|
||||
level: string;
|
||||
}[];
|
||||
};
|
||||
recommendations: string[]; // 建议措施
|
||||
}
|
||||
import { Plus } from '@element-plus/icons-vue';
|
||||
|
||||
// 示例数据
|
||||
const tableData = ref<AnalysisReport[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "2024年第一季度水质监测分析报告",
|
||||
@ -87,15 +55,15 @@ const filterForm = ref({
|
||||
|
||||
// 添加详情查看功能
|
||||
const detailVisible = ref(false);
|
||||
const currentReport = ref<AnalysisReport | null>(null);
|
||||
const currentReport = ref(null);
|
||||
|
||||
const handleView = (row: AnalysisReport) => {
|
||||
const handleView = (row) => {
|
||||
currentReport.value = row;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 添加导出功能
|
||||
const handleExport = (row: AnalysisReport) => {
|
||||
const handleExport = (row) => {
|
||||
ElMessageBox.confirm("确认导出该分析报告？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
@ -110,7 +78,7 @@ const handleExport = (row: AnalysisReport) => {
|
||||
};
|
||||
|
||||
// 添加图表resize监听
|
||||
let myChart: echarts.ECharts | null = null;
|
||||
let myChart = null;
|
||||
|
||||
const initChart = () => {
|
||||
const chartDom = document.getElementById("trendChart");
|
||||
@ -266,12 +234,12 @@ const paginatedData = computed(() => {
|
||||
return tableData.value.slice(start, end);
|
||||
});
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
const handleCurrentChange = (val: number) => {
|
||||
const handleCurrentChange = (val) => {
|
||||
currentPage.value = val;
|
||||
};
|
||||
|
||||
@ -480,7 +448,7 @@ const handleRefresh = () => {
|
||||
<el-button @click="detailVisible = false">关闭</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="handleExport(currentReport!)"
|
||||
@click="handleExport(currentReport)"
|
||||
:disabled="!currentReport"
|
||||
>
|
||||
导出
|
||||
@ -492,7 +460,7 @@ const handleRefresh = () => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.analysis-report {
|
||||
.card-header {
|
||||
|
||||
@ -1,29 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
|
||||
import { Plus, Document, Download, TrendCharts, Connection } from '@element-plus/icons-vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
interface DailyReport {
|
||||
id: number;
|
||||
title: string;
|
||||
reporter: string;
|
||||
department: string;
|
||||
type: string;
|
||||
content: string;
|
||||
summary: string;
|
||||
data: {
|
||||
type: string;
|
||||
value: string | number;
|
||||
trend?: string;
|
||||
}[];
|
||||
attachments: string[];
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
// 示例数据
|
||||
const tableData = ref<DailyReport[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "A区巡护日报",
|
||||
@ -60,9 +42,9 @@ const formData = ref({
|
||||
|
||||
// 查看详情
|
||||
const detailVisible = ref(false);
|
||||
const currentReport = ref<DailyReport | null>(null);
|
||||
const currentReport = ref(null);
|
||||
|
||||
const handleView = (row: DailyReport) => {
|
||||
const handleView = (row) => {
|
||||
currentReport.value = row;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
@ -78,13 +60,12 @@ const handleSubmit = () => {
|
||||
};
|
||||
|
||||
// 趋势图表
|
||||
let trendChart: echarts.ECharts | null = null;
|
||||
let trendChart = null;
|
||||
|
||||
// 初始化趋势图表
|
||||
const initTrendChart = () => {
|
||||
const chartDom = document.getElementById('trendChart');
|
||||
if (!chartDom) return;
|
||||
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
backgroundColor: 'transparent',
|
||||
@ -235,7 +216,6 @@ const handleGenerate = () => {
|
||||
cancelButtonText: '取消',
|
||||
type: 'info'
|
||||
}).then(() => {
|
||||
// 模拟自动汇总数据过程
|
||||
const loadingInstance = ElLoading.service({
|
||||
text: '正在汇总数据，请稍候...'
|
||||
});
|
||||
@ -443,7 +423,7 @@ const showTrendAnalysis = ref(false);
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailVisible = false">关闭</el-button>
|
||||
<el-button type="warning" @click="handleExport(currentReport!)">导出</el-button>
|
||||
<el-button type="warning" @click="handleExport(currentReport)">导出</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
@ -481,7 +461,7 @@ const showTrendAnalysis = ref(false);
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.daily-report {
|
||||
.card-header {
|
||||
|
||||
@ -1,21 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, computed, reactive } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
interface AnalysisReport {
|
||||
id: number;
|
||||
title: string;
|
||||
type: string;
|
||||
period: string;
|
||||
author: string;
|
||||
summary: string;
|
||||
charts: string[];
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<AnalysisReport[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "2024年第一季度水质分析报告",
|
||||
@ -107,7 +96,7 @@ const handleSubmit = () => {
|
||||
};
|
||||
|
||||
// 添加导出处理函数
|
||||
const handleExport = (row: AnalysisReport) => {
|
||||
const handleExport = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确认导出该分析报告？',
|
||||
'提示',
|
||||
@ -130,9 +119,9 @@ const handleExport = (row: AnalysisReport) => {
|
||||
|
||||
// 添加查看报告功能
|
||||
const detailVisible = ref(false);
|
||||
const currentReport = ref<AnalysisReport | null>(null);
|
||||
const currentReport = ref(null);
|
||||
|
||||
const handleView = (row: AnalysisReport) => {
|
||||
const handleView = (row) => {
|
||||
currentReport.value = row;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
@ -273,7 +262,7 @@ const handleView = (row: AnalysisReport) => {
|
||||
<el-button @click="detailVisible = false">关闭</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="handleExport(currentReport!)"
|
||||
@click="handleExport(currentReport)"
|
||||
:disabled="!currentReport"
|
||||
>
|
||||
导出
|
||||
@ -285,7 +274,7 @@ const handleView = (row: AnalysisReport) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.analysis-report-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,21 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, computed, reactive } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { Search } from "@element-plus/icons-vue";
|
||||
|
||||
interface DailyReport {
|
||||
id: number;
|
||||
title: string;
|
||||
reporter: string;
|
||||
department: string;
|
||||
type: string;
|
||||
content: string;
|
||||
attachments: string[];
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<DailyReport[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: "A区巡护日报",
|
||||
@ -42,9 +30,9 @@ const tableData = ref<DailyReport[]>([
|
||||
|
||||
// 搜索和筛选
|
||||
const searchText = ref("");
|
||||
const typeFilter = ref<string[]>([]);
|
||||
const statusFilter = ref<string[]>([]);
|
||||
const dateRange = ref<[string, string]>(["", ""]);
|
||||
const typeFilter = ref([]);
|
||||
const statusFilter = ref([]);
|
||||
const dateRange = ref(["", ""]);
|
||||
|
||||
// 过滤数据
|
||||
const filteredData = computed(() => {
|
||||
@ -70,7 +58,7 @@ const formData = reactive({
|
||||
title: "",
|
||||
type: "",
|
||||
content: "",
|
||||
attachments: [] as string[],
|
||||
attachments: [],
|
||||
});
|
||||
|
||||
const handleCreate = () => {
|
||||
@ -85,15 +73,15 @@ const handleSubmit = () => {
|
||||
|
||||
// 查看报告
|
||||
const detailVisible = ref(false);
|
||||
const currentReport = ref<DailyReport | null>(null);
|
||||
const currentReport = ref(null);
|
||||
|
||||
const handleView = (row: DailyReport) => {
|
||||
const handleView = (row) => {
|
||||
currentReport.value = row;
|
||||
detailVisible.value = true;
|
||||
};
|
||||
|
||||
// 添加导出处理函数
|
||||
const handleExport = (row: DailyReport) => {
|
||||
const handleExport = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确认导出该报告？',
|
||||
'提示',
|
||||
@ -281,7 +269,7 @@ const handleExport = (row: DailyReport) => {
|
||||
<el-button @click="detailVisible = false">关闭</el-button>
|
||||
<el-button
|
||||
type="warning"
|
||||
@click="handleExport(currentReport!)"
|
||||
@click="handleExport(currentReport)"
|
||||
:disabled="!currentReport"
|
||||
>
|
||||
导出
|
||||
@ -293,7 +281,7 @@ const handleExport = (row: DailyReport) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.daily-report-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,22 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import type { UploadProps } from "element-plus";
|
||||
import { markRaw } from 'vue';
|
||||
import { Upload, Download, Refresh } from "@element-plus/icons-vue";
|
||||
|
||||
// 备份记录
|
||||
interface BackupRecord {
|
||||
id: number;
|
||||
name: string;
|
||||
size: string;
|
||||
type: string;
|
||||
status: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
// 模拟备份记录数据
|
||||
const backupRecords = ref<BackupRecord[]>([
|
||||
const backupRecords = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "系统完整备份_20240320",
|
||||
@ -36,7 +25,7 @@ const backupRecords = ref<BackupRecord[]>([
|
||||
]);
|
||||
|
||||
// 数据导入上传配置
|
||||
const uploadConfig: UploadProps = {
|
||||
const uploadConfig = {
|
||||
action: "/api/upload",
|
||||
multiple: true,
|
||||
accept: ".xlsx,.csv",
|
||||
@ -75,7 +64,7 @@ const handleBackup = () => {
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
ElMessage.success("备份任务已启动");
|
||||
const newBackup: BackupRecord = {
|
||||
const newBackup = {
|
||||
id: Date.now(),
|
||||
name: `系统备份_${new Date().toISOString().split("T")[0].replace(/-/g, "")}`,
|
||||
size: "处理中",
|
||||
@ -97,7 +86,7 @@ const handleBackup = () => {
|
||||
};
|
||||
|
||||
// 恢复备份
|
||||
const handleRestore = (record: BackupRecord) => {
|
||||
const handleRestore = (record) => {
|
||||
if (record.status !== "成功") {
|
||||
ElMessage.warning("只能恢复成功的备份");
|
||||
return;
|
||||
@ -113,7 +102,7 @@ const handleRestore = (record: BackupRecord) => {
|
||||
};
|
||||
|
||||
// 删除备份
|
||||
const handleDelete = (record: BackupRecord) => {
|
||||
const handleDelete = (record) => {
|
||||
ElMessageBox.confirm("确认删除该备份？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
@ -248,7 +237,7 @@ const icons = {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.data-container {
|
||||
.mb-20 {
|
||||
|
||||
@ -1,22 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import * as echarts from "echarts";
|
||||
import { Plus } from "@element-plus/icons-vue";
|
||||
|
||||
interface Device {
|
||||
id: number;
|
||||
name: string;
|
||||
type: string;
|
||||
location: string;
|
||||
status: string;
|
||||
ip: string;
|
||||
lastHeartbeat: string;
|
||||
lastMaintenance: string;
|
||||
}
|
||||
|
||||
// 模拟设备数据
|
||||
const tableData = ref<Device[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "A区-水质监测器-01",
|
||||
@ -50,7 +39,7 @@ const deviceTypes = [
|
||||
// 新增/编辑设备
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const currentDevice = ref<Device | null>(null);
|
||||
const currentDevice = ref(null);
|
||||
|
||||
const formData = ref({
|
||||
name: "",
|
||||
@ -78,7 +67,7 @@ const handleAdd = () => {
|
||||
};
|
||||
|
||||
// 打开编辑弹窗
|
||||
const handleEdit = (row: Device) => {
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true;
|
||||
currentDevice.value = row;
|
||||
formData.value = {
|
||||
@ -99,7 +88,7 @@ const handleSubmit = async () => {
|
||||
if (isEdit.value && currentDevice.value) {
|
||||
// 编辑模式
|
||||
const index = tableData.value.findIndex(
|
||||
(item) => item.id === currentDevice.value!.id
|
||||
(item) => item.id === currentDevice.value.id
|
||||
);
|
||||
if (index !== -1) {
|
||||
tableData.value[index] = {
|
||||
@ -111,7 +100,7 @@ const handleSubmit = async () => {
|
||||
}
|
||||
} else {
|
||||
// 新增模式
|
||||
const newDevice: Device = {
|
||||
const newDevice = {
|
||||
id: tableData.value.length + 1,
|
||||
...formData.value,
|
||||
status: "在线",
|
||||
@ -141,7 +130,7 @@ const resetForm = () => {
|
||||
};
|
||||
|
||||
// 删除设备
|
||||
const handleDelete = (row: Device) => {
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm("确认删除该设备？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
@ -158,12 +147,12 @@ const handleDelete = (row: Device) => {
|
||||
};
|
||||
|
||||
// 远程配置
|
||||
const handleConfig = (row: Device) => {
|
||||
const handleConfig = (row) => {
|
||||
ElMessage.success("正在连接设备...");
|
||||
};
|
||||
|
||||
// 设备维护
|
||||
const handleMaintenance = (row: Device) => {
|
||||
const handleMaintenance = (row) => {
|
||||
ElMessage.success("已记录维护时间");
|
||||
const index = tableData.value.findIndex((item) => item.id === row.id);
|
||||
if (index !== -1) {
|
||||
@ -206,8 +195,8 @@ const defaultProps = {
|
||||
|
||||
// 监控相关
|
||||
const monitorVisible = ref(false);
|
||||
const currentMonitorDevice = ref<Device | null>(null);
|
||||
const monitorChart = ref<echarts.ECharts | null>(null);
|
||||
const currentMonitorDevice = ref(null);
|
||||
const monitorChart = ref(null);
|
||||
|
||||
// 模拟实时数据
|
||||
const realTimeData = ref({
|
||||
@ -257,13 +246,13 @@ const handleAddGroup = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const handleNodeClick = (data: any) => {
|
||||
const handleNodeClick = (data) => {
|
||||
console.log("选中分组:", data);
|
||||
// 这里可以根据分组筛选设备列表
|
||||
};
|
||||
|
||||
// 监控处理
|
||||
const handleMonitor = (device: Device) => {
|
||||
const handleMonitor = (device) => {
|
||||
currentMonitorDevice.value = device;
|
||||
monitorVisible.value = true;
|
||||
initMonitorChart();
|
||||
@ -330,7 +319,7 @@ const initMonitorChart = () => {
|
||||
};
|
||||
|
||||
// 模拟实时数据更新
|
||||
let dataTimer: number;
|
||||
let dataTimer;
|
||||
const startRealTimeData = () => {
|
||||
clearInterval(dataTimer);
|
||||
dataTimer = setInterval(() => {
|
||||
@ -376,7 +365,7 @@ const startRealTimeData = () => {
|
||||
};
|
||||
|
||||
// 检查告警
|
||||
const checkAlarms = (data: any) => {
|
||||
const checkAlarms = (data) => {
|
||||
const { thresholds } = alarmConfig.value;
|
||||
|
||||
if (
|
||||
@ -610,7 +599,7 @@ onUnmounted(() => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.device-container {
|
||||
.group-card {
|
||||
|
||||
@ -1,21 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useSystemLogStore } from '../../../stores/systemLog';
|
||||
import { markRaw } from 'vue';
|
||||
import { Download, Delete } from "@element-plus/icons-vue";
|
||||
|
||||
interface LogEntry {
|
||||
id: number;
|
||||
type: string;
|
||||
user: string;
|
||||
action: string;
|
||||
ip: string;
|
||||
status: string;
|
||||
detail: string;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
const systemLogStore = useSystemLogStore();
|
||||
|
||||
// 日志类型选项
|
||||
@ -34,7 +23,7 @@ const statusOptions = [
|
||||
];
|
||||
|
||||
// 获取状态标签类型
|
||||
const getStatusType = (status: string) => {
|
||||
const getStatusType = (status) => {
|
||||
switch (status) {
|
||||
case "成功":
|
||||
return "success";
|
||||
@ -184,7 +173,7 @@ const icons = {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.logs-container {
|
||||
.card-header {
|
||||
|
||||
@ -1,18 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
interface Permission {
|
||||
id: number;
|
||||
name: string;
|
||||
code: string;
|
||||
description: string;
|
||||
type: string;
|
||||
status: boolean;
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<Permission[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "用户管理",
|
||||
@ -45,7 +35,7 @@ const tableData = ref<Permission[]>([
|
||||
// 新增/编辑权限
|
||||
const dialogVisible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const currentPermission = ref<Permission | null>(null);
|
||||
const currentPermission = ref(null);
|
||||
|
||||
const formData = ref({
|
||||
name: "",
|
||||
@ -73,7 +63,7 @@ const handleAdd = () => {
|
||||
};
|
||||
|
||||
// 打开编辑弹窗
|
||||
const handleEdit = (row: Permission) => {
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true;
|
||||
currentPermission.value = row;
|
||||
formData.value = {
|
||||
@ -95,7 +85,7 @@ const handleSubmit = async () => {
|
||||
if (isEdit.value && currentPermission.value) {
|
||||
// 编辑模式：更新表格中的数据
|
||||
const index = tableData.value.findIndex(
|
||||
(item) => item.id === currentPermission.value!.id
|
||||
(item) => item.id === currentPermission.value.id
|
||||
);
|
||||
if (index !== -1) {
|
||||
tableData.value[index] = {
|
||||
@ -106,7 +96,7 @@ const handleSubmit = async () => {
|
||||
}
|
||||
} else {
|
||||
// 新增模式：添加到表格
|
||||
const newPermission: Permission = {
|
||||
const newPermission = {
|
||||
id: tableData.value.length + 1,
|
||||
...formData.value,
|
||||
createTime: new Date().toLocaleString(),
|
||||
@ -142,7 +132,7 @@ const handleDialogClose = () => {
|
||||
};
|
||||
|
||||
// 删除权限
|
||||
const handleDelete = (row: Permission) => {
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm("确认删除该权限？", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
@ -246,7 +236,7 @@ const handleDelete = (row: Permission) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "./styles/variables" as v;
|
||||
|
||||
.permission-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,15 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
interface RoleData {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
permissions: string[];
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
const tableData = ref<RoleData[]>([
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "超级管理员",
|
||||
@ -26,11 +18,11 @@ const tableData = ref<RoleData[]>([
|
||||
},
|
||||
]);
|
||||
|
||||
const handleEdit = (row: RoleData) => {
|
||||
const handleEdit = (row) => {
|
||||
console.log("编辑角色:", row);
|
||||
};
|
||||
|
||||
const handleDelete = (row: RoleData) => {
|
||||
const handleDelete = (row) => {
|
||||
console.log("删除角色:", row);
|
||||
};
|
||||
</script>
|
||||
@ -73,7 +65,7 @@ const handleDelete = (row: RoleData) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "../../../styles/variables.scss" as *;
|
||||
|
||||
.role-container {
|
||||
.el-card {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
// 系统参数配置
|
||||
@ -31,7 +31,7 @@ const alertConfig = ref({
|
||||
});
|
||||
|
||||
// 保存配置
|
||||
const handleSave = (type: string) => {
|
||||
const handleSave = (type) => {
|
||||
// 这里模拟保存配置
|
||||
console.log(
|
||||
`保存${type}配置:`,
|
||||
@ -174,7 +174,7 @@ const handleSave = (type: string) => {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "../../../styles/variables.scss" as *;
|
||||
|
||||
.settings-container {
|
||||
.mb-20 {
|
||||
|
||||
@ -1,41 +1,260 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { getUserList, createUser, updateUser, deleteUser } from "@/api/user";
|
||||
import { formatDateTime } from "@/utils/format";
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
username: string;
|
||||
role: string;
|
||||
email: string;
|
||||
status: boolean;
|
||||
createTime: string;
|
||||
}
|
||||
const tableData = ref([]);
|
||||
const allData = ref([]); // 保存所有数据
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
|
||||
const tableData = ref<UserData[]>([
|
||||
{
|
||||
id: 1,
|
||||
username: "admin",
|
||||
role: "超级管理员",
|
||||
email: "admin@example.com",
|
||||
status: true,
|
||||
createTime: "2024-03-20",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: "manager",
|
||||
role: "管理人员",
|
||||
email: "manager@example.com",
|
||||
status: true,
|
||||
createTime: "2024-03-20",
|
||||
},
|
||||
]);
|
||||
// 查询参数
|
||||
const queryParams = ref({
|
||||
username: '',
|
||||
role: '',
|
||||
status: ''
|
||||
});
|
||||
|
||||
const handleEdit = (row: UserData) => {
|
||||
console.log("编辑用户:", row);
|
||||
// 过滤后的数据
|
||||
const filteredData = computed(() => {
|
||||
return allData.value.filter(item => {
|
||||
// 用户名搜索
|
||||
if (queryParams.value.username &&
|
||||
!item.real_name.toLowerCase().includes(queryParams.value.username.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 角色搜索
|
||||
if (queryParams.value.role &&
|
||||
item.role.name !== queryParams.value.role) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 状态搜索
|
||||
if (queryParams.value.status !== '' &&
|
||||
item.status !== queryParams.value.status) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}).sort((a, b) => a.id - b.id); // 按ID升序排序
|
||||
});
|
||||
|
||||
// 获取用户列表
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getUserList();
|
||||
|
||||
if (res.success) {
|
||||
allData.value = res.data.list; // 保存所有数据
|
||||
tableData.value = filteredData.value; // 显示过滤后的数据
|
||||
total.value = filteredData.value.length;
|
||||
} else {
|
||||
ElMessage.error(res.message || '获取用户列表失败');
|
||||
}
|
||||
} catch (error) {
|
||||
if (error.response) {
|
||||
ElMessage.error(error.response.data.message || '获取用户列表失败');
|
||||
} else if (error.request) {
|
||||
ElMessage.error('网络错误，请检查网络连接');
|
||||
} else {
|
||||
ElMessage.error(error.message || '获取用户列表失败');
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = (row: UserData) => {
|
||||
console.log("删除用户:", row);
|
||||
// 处理查询
|
||||
const handleQuery = () => {
|
||||
tableData.value = filteredData.value;
|
||||
total.value = filteredData.value.length;
|
||||
};
|
||||
|
||||
// 重置查询
|
||||
const resetQuery = () => {
|
||||
queryParams.value = {
|
||||
username: '',
|
||||
role: '',
|
||||
status: ''
|
||||
};
|
||||
tableData.value = allData.value;
|
||||
total.value = allData.value.length;
|
||||
};
|
||||
|
||||
// 新增/编辑对话框
|
||||
const dialogVisible = ref(false);
|
||||
const dialogTitle = ref('新增用户');
|
||||
const formData = ref({
|
||||
username: '',
|
||||
password: '',
|
||||
role_id: undefined,
|
||||
real_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
status: 1,
|
||||
expire_time: undefined
|
||||
});
|
||||
|
||||
// 表单规则
|
||||
const rules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,30}$/,
|
||||
message: '密码必须包含字母和数字',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
role_id: [
|
||||
{ required: true, message: '请选择角色', trigger: 'change' }
|
||||
],
|
||||
email: [
|
||||
{
|
||||
pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/,
|
||||
message: '请输入正确的邮箱格式',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
phone: [
|
||||
{
|
||||
pattern: /^1[3-9]\d{9}$/,
|
||||
message: '请输入正确的手机号格式',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const formRef = ref(null);
|
||||
const isEdit = ref(false);
|
||||
const editId = ref(null);
|
||||
|
||||
// 打开新增对话框
|
||||
const handleAdd = () => {
|
||||
dialogTitle.value = '新增用户';
|
||||
isEdit.value = false;
|
||||
editId.value = null;
|
||||
formData.value = {
|
||||
username: '',
|
||||
password: '',
|
||||
role_id: undefined,
|
||||
real_name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
status: 1,
|
||||
expire_time: undefined
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 打开编辑对话框
|
||||
const handleEdit = (row) => {
|
||||
dialogTitle.value = '编辑用户';
|
||||
isEdit.value = true;
|
||||
editId.value = row.id;
|
||||
formData.value = {
|
||||
real_name: row.real_name || '',
|
||||
email: row.email || '',
|
||||
phone: row.phone || '',
|
||||
role_id: row.role.id.toString(),
|
||||
status: row.status.toString(),
|
||||
expire_time: row.expire_time || '',
|
||||
password: '' // 编辑时密码为可选
|
||||
};
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 提交表单
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return;
|
||||
|
||||
try {
|
||||
await formRef.value.validate();
|
||||
|
||||
const submitData = { ...formData.value };
|
||||
|
||||
// 处理数据格式
|
||||
if (submitData.status) {
|
||||
submitData.status = parseInt(submitData.status); // 转换为数字
|
||||
}
|
||||
if (submitData.role_id) {
|
||||
submitData.role_id = parseInt(submitData.role_id); // 转换为数字
|
||||
}
|
||||
// 如果过期时间为空，则不提交该字段
|
||||
if (!submitData.expire_time) {
|
||||
delete submitData.expire_time;
|
||||
}
|
||||
|
||||
console.log('提交的数据:', submitData); // 打印提交的数据
|
||||
|
||||
if (isEdit.value) {
|
||||
// 编辑时，如果密码为空，则不提交密码字段
|
||||
if (!submitData.password) {
|
||||
delete submitData.password;
|
||||
}
|
||||
await updateUser(editId.value, submitData);
|
||||
ElMessage.success('编辑成功');
|
||||
} else {
|
||||
await createUser(submitData);
|
||||
ElMessage.success('添加成功');
|
||||
}
|
||||
|
||||
dialogVisible.value = false;
|
||||
getList(); // 刷新列表
|
||||
} catch (error) {
|
||||
console.error('表单提交错误:', error);
|
||||
if (error.response) {
|
||||
console.error('错误响应数据:', error.response.data);
|
||||
ElMessage.error(error.response.data.message || '提交失败，请检查表单数据');
|
||||
} else if (error.request) {
|
||||
ElMessage.error('网络错误，请检查网络连接');
|
||||
} else {
|
||||
ElMessage.error(error.message || '操作失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 删除用户
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
'确认删除该用户吗？',
|
||||
'警告',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
await deleteUser(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
getList(); // 刷新列表
|
||||
} catch (error) {
|
||||
ElMessage.error(error.message || '删除失败');
|
||||
}
|
||||
}).catch(() => {
|
||||
// 取消删除
|
||||
});
|
||||
};
|
||||
|
||||
// 角色选项
|
||||
const roleOptions = [
|
||||
{ label: '超级管理员', value: '1' },
|
||||
{ label: '管理人员', value: '2' },
|
||||
{ label: '普通用户', value: '3' }
|
||||
];
|
||||
|
||||
// 页面加载时获取列表
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -44,14 +263,50 @@ const handleDelete = (row: UserData) => {
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>用户管理</span>
|
||||
<el-button type="primary">新增用户</el-button>
|
||||
<el-button type="primary" @click="handleAdd">新增用户</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<!-- 搜索表单 -->
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
|
||||
<el-form-item label="用户名" prop="username">
|
||||
<el-input
|
||||
v-model="queryParams.username"
|
||||
placeholder="请输入用户名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="role">
|
||||
<el-select v-model="queryParams.role" placeholder="请选择角色" clearable>
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option :value="1" label="启用" />
|
||||
<el-option :value="0" label="禁用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="username" label="用户名" width="120" />
|
||||
<el-table-column prop="role" label="角色" width="120" />
|
||||
<el-table-column prop="real_name" label="用户名" width="120" />
|
||||
<el-table-column prop="role.name" label="角色" width="120" />
|
||||
<el-table-column prop="email" label="邮箱" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
@ -60,24 +315,121 @@ const handleDelete = (row: UserData) => {
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="180" />
|
||||
<el-table-column prop="updated_at" label="创建时间" width="180">
|
||||
<template #default="{ row }">
|
||||
{{ formatDateTime(row.updated_at) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" size="small" @click="handleEdit(row)">
|
||||
<el-button type="primary" link @click="handleEdit(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(row)">
|
||||
<el-button type="danger" link @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
:size="'small'"
|
||||
:total="total"
|
||||
:default-current-page="1"
|
||||
:default-page-size="10"
|
||||
layout="total, prev, pager, next"
|
||||
:disabled="true"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 新增/编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="dialogTitle"
|
||||
width="500px"
|
||||
@close="dialogVisible = false"
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="isEdit ? {
|
||||
...rules,
|
||||
password: [] // 编辑模式下移除密码验证规则
|
||||
} : rules"
|
||||
label-width="100px"
|
||||
class="user-form"
|
||||
>
|
||||
<el-form-item label="用户名" prop="username" v-if="!isEdit">
|
||||
<el-input v-model="formData.username" placeholder="请输入用户名" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="isEdit ? '新密码' : '密码'"
|
||||
prop="password"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
show-password
|
||||
:placeholder="isEdit ? '不修改请留空' : '请输入密码'"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="角色" prop="role_id">
|
||||
<el-select v-model="formData.role_id" placeholder="请选择角色" class="w-full">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="真实姓名" prop="real_name">
|
||||
<el-input
|
||||
v-model="formData.real_name"
|
||||
placeholder="请输入真实姓名"
|
||||
maxlength="50"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="email">
|
||||
<el-input v-model="formData.email" placeholder="请输入邮箱" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号" prop="phone">
|
||||
<el-input v-model="formData.phone" placeholder="请输入手机号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-radio-group v-model="formData.status">
|
||||
<el-radio :value="'1'">启用</el-radio>
|
||||
<el-radio :value="'0'">禁用</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="过期时间" prop="expire_time">
|
||||
<el-date-picker
|
||||
v-model="formData.expire_time"
|
||||
type="datetime"
|
||||
placeholder="请选择过期时间"
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
class="w-full"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../../styles/variables.scss";
|
||||
@use "../../../styles/variables.scss" as *;
|
||||
|
||||
.user-container {
|
||||
.el-card {
|
||||
@ -105,6 +457,25 @@ const handleDelete = (row: UserData) => {
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 16px;
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select) {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
th.el-table__cell {
|
||||
background-color: #fafafa;
|
||||
@ -120,4 +491,23 @@ const handleDelete = (row: UserData) => {
|
||||
.el-tag {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.user-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
1
src/vite-env.d.ts
vendored
1
src/vite-env.d.ts
vendored
@ -1 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
@ -1,14 +0,0 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@ -9,5 +9,12 @@ export default defineConfig({
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: path.resolve(__dirname, 'index.html')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
x
Reference in New Issue
Block a user