mitsuhaV/WetlandGuard-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mitsuhaV:12f41faa403a501ae40149698a8996aa3c6bbe6b
Branches Tags
mitsuhaV:master
...
compare: mitsuhaV:fb5ad57dc158c085df59656aa661185c18b375d6
Branches Tags
mitsuhaV:master

3 Commits
12f41faa40 ... fb5ad57dc1

Author SHA1 Message Date
wzclm
fb5ad57dc1 Implement comprehensive user management functionality with API integration 2025-02-20 21:41:57 +08:00
wzclm
bb1acb50c1 Add AnalysisReport interface and refine report type definitions 2025-02-20 20:46:27 +08:00
wzclm
c59e2cf505 优化了路由配置 2025-02-20 20:44:31 +08:00
49 changed files with 1165 additions and 724 deletions
Show Stats Expand all files Collapse all files

25
.env Normal file
View 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
View 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
View 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
View 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

2
index.html
View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

7
package-lock.json generated
View File

@ -15,7 +15,8 @@
"json-server": "^1.0.0-beta.3", "json-server": "^1.0.0-beta.3",
"pinia": "^2.3.1", "pinia": "^2.3.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-router": "^4.5.0" "vue-router": "^4.5.0",
"wetlandguard-admin": "file:"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.13.0", "@types/node": "^22.13.0",
@ -2750,6 +2751,10 @@
"typescript": ">=5.0.0" "typescript": ">=5.0.0"
} }
}, },
"node_modules/wetlandguard-admin": {
"resolved": "",
"link": true
},
"node_modules/zrender": { "node_modules/zrender": {
"version": "5.6.1", "version": "5.6.1",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz", "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",

3
package.json
View File

@ -16,7 +16,8 @@
"json-server": "^1.0.0-beta.3", "json-server": "^1.0.0-beta.3",
"pinia": "^2.3.1", "pinia": "^2.3.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-router": "^4.5.0" "vue-router": "^4.5.0",
"wetlandguard-admin": "file:"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.13.0", "@types/node": "^22.13.0",

20
src/api/login/index.js Normal file
View 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')
}

49
src/api/report.ts
View File

@ -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 })
};

35
src/api/request.ts
View File

@ -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
View 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}`)
}

41
src/components/HelloWorld.vue
View File

@ -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>

34
src/components/report/EnvironmentAnalysis.vue
View File

@ -1,15 +1,23 @@
<script setup lang="ts"> <script setup>
const props = defineProps<{ const props = defineProps({
data: { data: {
qualityTrend: string; type: Object,
indicators: { required: true,
name: string; validator: (value) => {
value: number; return (
threshold: number; value.qualityTrend &&
status: string; Array.isArray(value.indicators) &&
}[]; value.indicators.every(
}; (indicator) =>
}>(); indicator.name &&
typeof indicator.value === 'number' &&
typeof indicator.threshold === 'number' &&
indicator.status
)
);
},
},
});
</script> </script>
<template> <template>
@ -19,7 +27,7 @@ const props = defineProps<{
:type="data.qualityTrend === '改善' ? 'success' : data.qualityTrend === '恶化' ? 'warning' : 'info'" :type="data.qualityTrend === '改善' ? 'success' : data.qualityTrend === '恶化' ? 'warning' : 'info'"
show-icon show-icon
/> />
<div class="indicators-table"> <div class="indicators-table">
<el-table :data="data.indicators" border style="width: 100%"> <el-table :data="data.indicators" border style="width: 100%">
<el-table-column prop="name" label="监测指标" /> <el-table-column prop="name" label="监测指标" />
@ -43,4 +51,4 @@ const props = defineProps<{
margin-top: 20px; margin-top: 20px;
} }
} }
</style> </style>

30
src/components/report/MonitorDataChart.vue
View File

@ -1,19 +1,29 @@
<script setup lang="ts"> <script setup>
import { ref, onMounted, onUnmounted } from 'vue'; import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
const props = defineProps<{ const props = defineProps({
data: any; data: {
type: 'line' | 'bar'; type: [Object, Array],
title?: string; 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 initChart = () => {
const chartDom = document.getElementById('monitorChart'); const chartDom = document.getElementById('monitorChart');
if (!chartDom) return; if (!chartDom) return;
chart = echarts.init(chartDom); chart = echarts.init(chartDom);
const option = { const option = {
title: { title: {
@ -24,7 +34,7 @@ const initChart = () => {
}, },
// ... 其他配置 // ... 其他配置
}; };
chart.setOption(option); chart.setOption(option);
}; };
@ -45,4 +55,4 @@ const handleResize = () => {
<template> <template>
<div id="monitorChart" style="width: 100%; height: 400px"></div> <div id="monitorChart" style="width: 100%; height: 400px"></div>
</template> </template>

24
src/components/report/SpeciesAnalysis.vue
View File

@ -1,13 +1,19 @@
<script setup lang="ts"> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
const props = defineProps<{ const props = defineProps({
data: { data: {
diversity: number; type: Object,
richness: number; required: true,
distribution: any[]; validator: (value) => {
}; return (
}>(); typeof value.diversity === 'number' &&
typeof value.richness === 'number' &&
Array.isArray(value.distribution)
);
},
},
});
const diversityLevel = computed(() => { const diversityLevel = computed(() => {
const value = props.data.diversity; const value = props.data.diversity;
@ -30,7 +36,7 @@ const diversityLevel = computed(() => {
{{ data.richness }} {{ data.richness }}
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<!-- 分布情况图表 --> <!-- 分布情况图表 -->
<div class="distribution-chart"> <div class="distribution-chart">
<!-- 这里可以添加物种分布的图表展示 --> <!-- 这里可以添加物种分布的图表展示 -->
@ -44,4 +50,4 @@ const diversityLevel = computed(() => {
margin-top: 20px; margin-top: 20px;
} }
} }
</style> </style>

4
src/layout/AdminLayout.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script setup>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import { ElMessageBox } from 'element-plus'; import { ElMessageBox } from 'element-plus';
@ -45,7 +45,7 @@ watch(
} }
); );
const handleSelect = (key: string) => { const handleSelect = (key) => {
router.push(key); router.push(key);
}; };

2
src/layout/components/Sidebar/menuData.ts → src/layout/components/Sidebar/menuData.js
View File

@ -14,4 +14,4 @@ export const menuData = [
} }
] ]
} }
]; ];

2
src/main.ts → src/main.js
View File

@ -17,4 +17,4 @@ app.use(createPinia())
app.use(router) app.use(router)
app.use(ElementPlus) app.use(ElementPlus)
app.mount('#app') app.mount('#app')

6
src/router/index.ts → src/router/index.js
View File

@ -112,13 +112,13 @@ const router = createRouter({
// 路由守卫 // 路由守卫
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
const userStore = useUserStore() const userStore = useUserStore()
// 如果访问登录页且已登录，重定向到首页 // 如果访问登录页且已登录，重定向到首页
if (to.path === '/login' && userStore.isLoggedIn) { if (to.path === '/login' && userStore.isLoggedIn) {
next('/') next('/')
return return
} }
// 如果需要认证但未登录，重定向到登录页 // 如果需要认证但未登录，重定向到登录页
if (to.matched.some(record => record.meta.requiresAuth) && !userStore.isLoggedIn) { if (to.matched.some(record => record.meta.requiresAuth) && !userStore.isLoggedIn) {
next({ next({
@ -130,4 +130,4 @@ router.beforeEach((to, from, next) => {
} }
}) })
export default router export default router

21
src/stores/systemLog.ts → src/stores/systemLog.js
View File

@ -1,25 +1,14 @@
import { defineStore } from 'pinia' 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', { export const useSystemLogStore = defineStore('systemLog', {
state: () => ({ state: () => ({
logs: [] as LogEntry[] logs: []
}), }),
actions: { actions: {
// 添加日志 // 添加日志
addLog(log: Omit<LogEntry, 'id' | 'createTime'>) { addLog(log) {
const newLog: LogEntry = { const newLog = {
...log, ...log,
id: Date.now(), id: Date.now(),
createTime: new Date().toLocaleString('zh-CN', { createTime: new Date().toLocaleString('zh-CN', {
@ -32,7 +21,7 @@ export const useSystemLogStore = defineStore('systemLog', {
hour12: false hour12: false
}).replace(/\//g, '-') }).replace(/\//g, '-')
}; };
this.logs.unshift(newLog); this.logs.unshift(newLog);
this.saveLogs(); this.saveLogs();
}, },
@ -60,4 +49,4 @@ export const useSystemLogStore = defineStore('systemLog', {
getters: { getters: {
getLogs: (state) => state.logs getLogs: (state) => state.logs
} }
}) })

72
src/stores/user.js Normal file
View 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
}
})

44
src/stores/user.ts
View File

@ -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
View 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
View 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

14
src/views/dashboard/index.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { markRaw } from 'vue' import { markRaw } from 'vue'
@ -377,8 +377,8 @@ onMounted(() => {
<template> <template>
<div class="dashboard-container"> <div class="dashboard-container">
<div class="stats-grid"> <div class="stats-grid">
<div v-for="card in statsCards" <div v-for="card in statsCards"
:key="card.title" :key="card.title"
class="stats-card" class="stats-card"
:style="{ backgroundColor: card.bgColor }"> :style="{ backgroundColor: card.bgColor }">
<div class="card-header"> <div class="card-header">
@ -394,16 +394,16 @@ onMounted(() => {
{{ card.value }} {{ card.value }}
<span class="unit">{{ card.unit }}</span> <span class="unit">{{ card.unit }}</span>
</div> </div>
<div class="change-value" <div class="change-value"
:style="{ color: card.change.value.includes('+') ? '#67C23A' : :style="{ color: card.change.value.includes('+') ? '#67C23A' :
card.change.value.includes('%') ? card.color : '#F56C6C' }"> card.change.value.includes('%') ? card.color : '#F56C6C' }">
{{ card.change.value }} {{ card.change.value }}
<span class="label">{{ card.change.label }}</span> <span class="label">{{ card.change.label }}</span>
</div> </div>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<div v-for="feature in card.features" <div v-for="feature in card.features"
:key="feature" :key="feature"
class="feature-item"> class="feature-item">
{{ feature }} {{ feature }}
</div> </div>

2
src/views/dashboard/screen/index.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script setup>
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import * as echarts from "echarts"; import * as echarts from "echarts";

10
src/views/login/index.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script setup>
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
@ -42,7 +42,7 @@ const getCurrentTime = () => {
.replace(/\//g, "-"); .replace(/\//g, "-");
}; };
const handleLogin = async (formEl: any) => { const handleLogin = async (formEl) => {
if (!formEl) return; if (!formEl) return;
loading.value = true; loading.value = true;
try { 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"); router.push(redirect || "/dashboard");
} else { } else {
// 记录失败日志 // 记录失败日志
@ -92,7 +92,7 @@ const handleLogin = async (formEl: any) => {
}; };
// 添加输入框获得焦点时的处理函数 // 添加输入框获得焦点时的处理函数
const handleFocus = (prop: "username" | "password") => { const handleFocus = (prop) => {
if (formRef.value) { if (formRef.value) {
// 清除对应字段的验证错误 // 清除对应字段的验证错误
formRef.value.clearValidate(prop); formRef.value.clearValidate(prop);
@ -161,7 +161,7 @@ const handleFocus = (prop: "username" | "password") => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/variables.scss"; @use "../../styles/variables.scss" as *;
.login-container { .login-container {
height: 100vh; height: 100vh;

54
src/views/monitor/environment/index.vue
View File

@ -1,19 +1,10 @@
<script setup lang="ts"> <script setup>
import { ref, reactive, onMounted } from "vue"; import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Monitor, Warning, TrendCharts } from "@element-plus/icons-vue"; import { Monitor, Warning, TrendCharts } from "@element-plus/icons-vue";
interface EnvData { const tableData = ref([
id: number;
location: string;
temperature: number;
humidity: number;
waterQuality: string;
time: string;
}
const tableData = ref<EnvData[]>([
{ {
id: 1, id: 1,
location: "A区监测点", location: "A区监测点",
@ -90,9 +81,9 @@ const initChart = () => {
textStyle: { textStyle: {
color: "#666", color: "#666",
}, },
formatter: function (params: any) { formatter: function (params) {
let result = `${params[0].axisValue}<br/>`; let result = `${params[0].axisValue}<br/>`;
params.forEach((item: any) => { params.forEach((item) => {
result += `${item.marker} ${item.seriesName}: ${item.value}${ result += `${item.marker} ${item.seriesName}: ${item.value}${
item.seriesName.includes("温度") item.seriesName.includes("温度")
? "°C" ? "°C"
@ -247,33 +238,30 @@ const initChart = () => {
myChart.setOption(option); myChart.setOption(option);
// 监听窗口大小变化 // 处理窗口大小变化
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
myChart.resize(); myChart.resize();
}); });
}; };
// 添加导出相关的数据和方法 // 导出相关数据
const exportDialogVisible = ref(false); const exportDialogVisible = ref(false);
const exportForm = reactive({ const exportForm = reactive({
timeRange: [] as string[], timeRange: [],
format: "excel",
dataType: ["temperature", "humidity", "waterQuality"], dataType: ["temperature", "humidity", "waterQuality"],
format: "excel",
}); });
const handleExport = () => { // 处理导出确认
exportDialogVisible.value = true;
};
const handleExportConfirm = () => { const handleExportConfirm = () => {
console.log("导出数据:", exportForm); ElMessage.success("数据导出成功");
exportDialogVisible.value = false; exportDialogVisible.value = false;
}; };
// 初始化迷你图表 // 初始化迷你图表
const initMiniChart = (el: HTMLElement, data: number[]) => { const initMiniChart = (el, data) => {
const chart = echarts.init(el); const chart = echarts.init(el);
chart.setOption({ const option = {
grid: { grid: {
left: 0, left: 0,
right: 0, right: 0,
@ -357,7 +345,8 @@ const initMiniChart = (el: HTMLElement, data: number[]) => {
}, },
padding: [4, 8], padding: [4, 8],
}, },
}); };
chart.setOption(option);
// 监听卡片hover事件 // 监听卡片hover事件
const card = el.closest(".env-card"); const card = el.closest(".env-card");
@ -378,15 +367,12 @@ const initMiniChart = (el: HTMLElement, data: number[]) => {
}; };
onMounted(() => { onMounted(() => {
// 初始化所有迷你图表
envStats.value.forEach((stat, index) => {
const el = document.getElementById(`miniChart${index}`);
if (el) {
initMiniChart(el, stat.trend);
}
});
// 原有的图表初始化
initChart(); initChart();
// 初始化所有迷你图表
const chartEls = document.querySelectorAll(".env-chart");
chartEls.forEach((el, index) => {
initMiniChart(el, envStats.value[index].trend);
});
}); });
</script> </script>
@ -482,7 +468,7 @@ onMounted(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.env-container { .env-container {
.env-card { .env-card {

25
src/views/monitor/species/index.vue
View File

@ -1,18 +1,9 @@
<script setup lang="ts"> <script setup>
import { ref, reactive } from "vue"; import { ref, reactive } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { onMounted } from "vue"; import { onMounted } from "vue";
interface SpeciesData { const tableData = ref([
id: number;
name: string;
type: string;
count: number;
location: string;
time: string;
}
const tableData = ref<SpeciesData[]>([
{ {
id: 1, id: 1,
name: "东方白鹳", name: "东方白鹳",
@ -148,7 +139,7 @@ const initChart = () => {
label: { label: {
show: true, show: true,
position: 'outside', position: 'outside',
formatter: function(params: any) { formatter: function(params) {
return `${params.name}\n${params.percent.toFixed(1)}%`; return `${params.name}\n${params.percent.toFixed(1)}%`;
}, },
color: '#666', color: '#666',
@ -172,10 +163,10 @@ const initChart = () => {
animationDurationUpdate: 500, animationDurationUpdate: 500,
animationType: 'expansion', animationType: 'expansion',
animationEasing: 'cubicInOut', animationEasing: 'cubicInOut',
animationDelay: function(idx: number) { animationDelay: function(idx) {
return idx * 100; return idx * 100;
}, },
animationDelayUpdate: function(idx: number) { animationDelayUpdate: function(idx) {
return idx * 100; return idx * 100;
}, },
emphasis: { emphasis: {
@ -201,7 +192,7 @@ const initChart = () => {
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
myChart.resize(); myChart.resize();
}); });
@ -214,7 +205,7 @@ onMounted(() => {
// 添加导出相关的数据和方法 // 添加导出相关的数据和方法
const exportDialogVisible = ref(false); const exportDialogVisible = ref(false);
const exportForm = reactive({ const exportForm = reactive({
timeRange: [] as string[], timeRange: [],
format: "excel", format: "excel",
}); });
@ -306,7 +297,7 @@ const handleExportConfirm = () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.species-container { .species-container {
padding: 20px; padding: 20px;

50
src/views/patrol/points/index.vue
View File

@ -1,18 +1,8 @@
<script setup lang="ts"> <script setup>
import { ref, reactive, computed } from "vue"; import { ref, reactive, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
interface PointData { const tableData = ref([
id: number;
name: string;
location: string;
type: string;
description: string;
status: string;
lastPatrolTime: string;
}
const tableData = ref<PointData[]>([
{ {
id: 1, id: 1,
name: "A区-1号点位", name: "A区-1号点位",
@ -56,25 +46,25 @@ const handleAdd = () => {
// 添加搜索相关 // 添加搜索相关
const searchText = ref(""); const searchText = ref("");
const typeFilter = ref<string[]>([]); const typeFilter = ref([]);
const statusFilter = ref<string[]>([]); const statusFilter = ref([]);
// 过滤表格数据 // 过滤表格数据
const filteredTableData = computed(() => { const filteredTableData = computed(() => {
return tableData.value.filter(point => { return tableData.value.filter(point => {
// 文本搜索 // 文本搜索
const searchLower = searchText.value.toLowerCase(); const searchLower = searchText.value.toLowerCase();
const textMatch = !searchText.value || const textMatch = !searchText.value ||
point.name.toLowerCase().includes(searchLower) || point.name.toLowerCase().includes(searchLower) ||
point.location.toLowerCase().includes(searchLower) || point.location.toLowerCase().includes(searchLower) ||
point.description.toLowerCase().includes(searchLower); point.description.toLowerCase().includes(searchLower);
// 类型筛选 // 类型筛选
const typeMatch = typeFilter.value.length === 0 || const typeMatch = typeFilter.value.length === 0 ||
typeFilter.value.includes(point.type); typeFilter.value.includes(point.type);
// 状态筛选 // 状态筛选
const statusMatch = statusFilter.value.length === 0 || const statusMatch = statusFilter.value.length === 0 ||
statusFilter.value.includes(point.status); statusFilter.value.includes(point.status);
return textMatch && typeMatch && statusMatch; return textMatch && typeMatch && statusMatch;
@ -90,9 +80,9 @@ const resetFilters = () => {
// 添加编辑相关 // 添加编辑相关
const isEdit = ref(false); const isEdit = ref(false);
const currentPoint = ref<PointData | null>(null); const currentPoint = ref(null);
const handleEdit = (row: PointData) => { const handleEdit = (row) => {
isEdit.value = true; isEdit.value = true;
currentPoint.value = row; currentPoint.value = row;
formData.name = row.name; formData.name = row.name;
@ -105,7 +95,7 @@ const handleEdit = (row: PointData) => {
// 更新提交处理 // 更新提交处理
const handleSubmit = async () => { const handleSubmit = async () => {
if (!formRef.value) return; if (!formRef.value) return;
try { try {
await formRef.value.validate(); await formRef.value.validate();
if (isEdit.value) { if (isEdit.value) {
@ -145,16 +135,16 @@ const paginatedData = computed(() => {
return filteredTableData.value.slice(start, end); return filteredTableData.value.slice(start, end);
}); });
const handleSizeChange = (val: number) => { const handleSizeChange = (val) => {
pageSize.value = val; pageSize.value = val;
currentPage.value = 1; currentPage.value = 1;
}; };
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val) => {
currentPage.value = val; currentPage.value = val;
}; };
const handleDelete = (row: PointData) => { const handleDelete = (row) => {
ElMessageBox.confirm("确认删除该巡护点位？", "提示", { ElMessageBox.confirm("确认删除该巡护点位？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -253,9 +243,9 @@ const pointTypes = [
<el-table-column label="操作" width="150" fixed="right"> <el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" size="small" link @click="handleEdit(row)">编辑</el-button> <el-button type="primary" size="small" link @click="handleEdit(row)">编辑</el-button>
<el-button <el-button
type="danger" type="danger"
size="small" size="small"
link link
@click="handleDelete(row)" @click="handleDelete(row)"
> >
@ -280,8 +270,8 @@ const pointTypes = [
</el-card> </el-card>
<!-- 新增点位弹窗 --> <!-- 新增点位弹窗 -->
<el-dialog <el-dialog
v-model="dialogVisible" v-model="dialogVisible"
:title="isEdit ? '编辑巡护点位' : '新增巡护点位'" :title="isEdit ? '编辑巡护点位' : '新增巡护点位'"
width="500px" width="500px"
@close="handleDialogClose" @close="handleDialogClose"
@ -328,7 +318,7 @@ const pointTypes = [
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.point-container { .point-container {
.el-card { .el-card {
@ -418,4 +408,4 @@ const pointTypes = [
width: 100%; width: 100%;
} }
} }
</style> </style>

27
src/views/patrol/records/index.vue
View File

@ -1,20 +1,9 @@
<script setup lang="ts"> <script setup>
import { ref, computed, reactive } from "vue"; import { ref, computed, reactive } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
interface RecordData { const tableData = ref([
id: number;
taskTitle: string;
patroller: string;
route: string;
findings: string;
images: string[];
status: string;
completedTime: string;
}
const tableData = ref<RecordData[]>([
{ {
id: 1, id: 1,
taskTitle: "A区日常巡查", taskTitle: "A区日常巡查",
@ -38,9 +27,9 @@ const tableData = ref<RecordData[]>([
]); ]);
const dialogVisible = ref(false); const dialogVisible = ref(false);
const currentRecord = ref<RecordData | null>(null); const currentRecord = ref(null);
const handleView = (row: RecordData) => { const handleView = (row) => {
currentRecord.value = row; currentRecord.value = row;
dialogVisible.value = true; dialogVisible.value = true;
}; };
@ -61,7 +50,7 @@ const filteredTableData = computed(() => {
const exportDialogVisible = ref(false); const exportDialogVisible = ref(false);
const exportForm = reactive({ const exportForm = reactive({
timeRange: [] as string[], timeRange: [],
format: "excel", format: "excel",
types: ["basic", "findings", "images"], types: ["basic", "findings", "images"],
}); });
@ -85,12 +74,12 @@ const paginatedData = computed(() => {
return filteredTableData.value.slice(start, end); return filteredTableData.value.slice(start, end);
}); });
const handleSizeChange = (val: number) => { const handleSizeChange = (val) => {
pageSize.value = val; pageSize.value = val;
currentPage.value = 1; currentPage.value = 1;
}; };
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val) => {
currentPage.value = val; currentPage.value = val;
}; };
</script> </script>
@ -242,7 +231,7 @@ const handleCurrentChange = (val: number) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.record-container { .record-container {
.el-card { .el-card {

89
src/views/patrol/tasks/index.vue
View File

@ -1,19 +1,8 @@
<script setup lang="ts"> <script setup>
import { ref, reactive, computed } from "vue"; import { ref, reactive, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
interface TaskData { const tableData = ref([
id: number;
title: string;
area: string;
assignee: string;
status: string;
priority: string;
startTime: string;
endTime: string;
}
const tableData = ref<TaskData[]>([
{ {
id: 1, id: 1,
title: "A区日常巡查", title: "A区日常巡查",
@ -36,8 +25,8 @@ const tableData = ref<TaskData[]>([
}, },
]); ]);
const getStatusType = (status: string) => { const getStatusType = (status) => {
const map: Record<string, string> = { const map = {
进行中: "success", 进行中: "success",
待开始: "info", 待开始: "info",
已完成: "primary", 已完成: "primary",
@ -46,8 +35,8 @@ const getStatusType = (status: string) => {
return map[status] || "info"; return map[status] || "info";
}; };
const getPriorityType = (priority: string) => { const getPriorityType = (priority) => {
const map: Record<string, string> = { const map = {
高: "danger", 高: "danger",
中: "warning", 中: "warning",
低: "info", 低: "info",
@ -55,7 +44,7 @@ const getPriorityType = (priority: string) => {
return map[priority] || "info"; return map[priority] || "info";
}; };
// 添加新建任务相关 // 新建任务相关
const newTaskDialogVisible = ref(false); const newTaskDialogVisible = ref(false);
const newTaskForm = reactive({ const newTaskForm = reactive({
title: "", title: "",
@ -67,24 +56,23 @@ const newTaskForm = reactive({
description: "", description: "",
}); });
// 添加任务详情相关 // 任务详情相关
const detailDialogVisible = ref(false); const detailDialogVisible = ref(false);
const currentTask = ref<TaskData | null>(null); const currentTask = ref(null);
// 添加任务状态更新相关 // 任务状态更新相关
const handleView = (row: TaskData) => { const handleView = (row) => {
currentTask.value = row; currentTask.value = row;
detailDialogVisible.value = true; detailDialogVisible.value = true;
}; };
const handleComplete = (row: TaskData) => { const handleComplete = (row) => {
ElMessageBox.confirm("确认完成该巡护任务？", "提示", { ElMessageBox.confirm("确认完成该巡护任务？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) })
.then(() => { .then(() => {
// 这里添加完成任务的逻辑
ElMessage.success("任务已完成"); ElMessage.success("任务已完成");
}) })
.catch(() => { .catch(() => {
@ -92,14 +80,13 @@ const handleComplete = (row: TaskData) => {
}); });
}; };
const handleCancel = (row: TaskData) => { const handleCancel = (row) => {
ElMessageBox.confirm("确认取消该巡护任务？", "提示", { ElMessageBox.confirm("确认取消该巡护任务？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}) })
.then(() => { .then(() => {
// 这里添加取消任务的逻辑
ElMessage.success("任务已取消"); ElMessage.success("任务已取消");
}) })
.catch(() => { .catch(() => {
@ -107,14 +94,8 @@ const handleCancel = (row: TaskData) => {
}); });
}; };
// 添加任务时间线数据 // 任务时间线数据
interface TimelineItem { const taskTimeline = ref([
type: 'primary' | 'success' | 'warning' | 'danger' | 'info';
timestamp: string;
content: string;
}
const taskTimeline = ref<TimelineItem[]>([
{ {
type: 'primary', type: 'primary',
timestamp: '2024-03-20 09:00', 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) { if (!value) {
callback(new Error('请选择时间')); callback(new Error('请选择时间'));
return; return;
@ -174,7 +155,7 @@ const handleNewTask = () => {
const handleNewTaskSubmit = async () => { const handleNewTaskSubmit = async () => {
if (!newTaskFormRef.value) return; if (!newTaskFormRef.value) return;
try { try {
await newTaskFormRef.value.validate(); await newTaskFormRef.value.validate();
console.log("提交新任务:", newTaskForm); console.log("提交新任务:", newTaskForm);
@ -199,18 +180,18 @@ const resetForm = () => {
} }
}; };
// 添加关闭弹窗时重置表单 // 关闭弹窗时重置表单
const handleDialogClose = () => { const handleDialogClose = () => {
resetForm(); resetForm();
}; };
// 添加搜索和筛选相关 // 搜索和筛选相关
const searchText = ref(""); const searchText = ref("");
const statusFilter = ref<string[]>([]); const statusFilter = ref([]);
const priorityFilter = ref<string[]>([]); const priorityFilter = ref([]);
const dateRange = ref<[string, string]>(['', '']); const dateRange = ref(['', '']);
// 添加统计数据 // 统计数据
const statistics = computed(() => { const statistics = computed(() => {
const total = tableData.value.length; const total = tableData.value.length;
const statusCount = { const statusCount = {
@ -226,8 +207,8 @@ const statistics = computed(() => {
}; };
tableData.value.forEach(task => { tableData.value.forEach(task => {
statusCount[task.status as keyof typeof statusCount]++; statusCount[task.status]++;
priorityCount[task.priority as keyof typeof priorityCount]++; priorityCount[task.priority]++;
}); });
return { return {
@ -242,17 +223,17 @@ const filteredTableData = computed(() => {
return tableData.value.filter(task => { return tableData.value.filter(task => {
// 文本搜索 // 文本搜索
const searchLower = searchText.value.toLowerCase(); const searchLower = searchText.value.toLowerCase();
const textMatch = !searchText.value || const textMatch = !searchText.value ||
task.title.toLowerCase().includes(searchLower) || task.title.toLowerCase().includes(searchLower) ||
task.area.toLowerCase().includes(searchLower) || task.area.toLowerCase().includes(searchLower) ||
task.assignee.toLowerCase().includes(searchLower); task.assignee.toLowerCase().includes(searchLower);
// 状态筛选 // 状态筛选
const statusMatch = statusFilter.value.length === 0 || const statusMatch = statusFilter.value.length === 0 ||
statusFilter.value.includes(task.status); statusFilter.value.includes(task.status);
// 优先级筛选 // 优先级筛选
const priorityMatch = priorityFilter.value.length === 0 || const priorityMatch = priorityFilter.value.length === 0 ||
priorityFilter.value.includes(task.priority); priorityFilter.value.includes(task.priority);
// 日期范围筛选 // 日期范围筛选
@ -489,9 +470,9 @@ const resetFilters = () => {
</el-dialog> </el-dialog>
<!-- 修改新建任务弹窗，添加表单验证 --> <!-- 修改新建任务弹窗，添加表单验证 -->
<el-dialog <el-dialog
v-model="newTaskDialogVisible" v-model="newTaskDialogVisible"
title="新建巡护任务" title="新建巡护任务"
width="600px" width="600px"
@close="handleDialogClose" @close="handleDialogClose"
> >
@ -546,7 +527,7 @@ const resetFilters = () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.task-container { .task-container {
.el-card { .el-card {
@ -669,7 +650,7 @@ const resetFilters = () => {
.el-radio-group { .el-radio-group {
.el-radio { .el-radio {
margin-right: 20px; margin-right: 20px;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -692,7 +673,7 @@ const resetFilters = () => {
.statistics-content { .statistics-content {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
.number { .number {
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;

2
src/views/report/about/index.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { markRaw } from "vue"; import { markRaw } from "vue";
import { import {

54
src/views/report/analysis/index.vue
View File

@ -1,43 +1,11 @@
<script setup lang="ts"> <script setup>
import { ref, onMounted, onUnmounted, computed } from "vue"; import { ref, onMounted, onUnmounted, computed } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { ElMessageBox, ElMessage } from "element-plus"; import { ElMessageBox, ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue"; 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[]; // 建议措施
}
// 示例数据 // 示例数据
const tableData = ref<AnalysisReport[]>([ const tableData = ref([
{ {
id: 1, id: 1,
title: "2024年第一季度水质监测分析报告", title: "2024年第一季度水质监测分析报告",
@ -87,15 +55,15 @@ const filterForm = ref({
// 添加详情查看功能 // 添加详情查看功能
const detailVisible = ref(false); const detailVisible = ref(false);
const currentReport = ref<AnalysisReport | null>(null); const currentReport = ref(null);
const handleView = (row: AnalysisReport) => { const handleView = (row) => {
currentReport.value = row; currentReport.value = row;
detailVisible.value = true; detailVisible.value = true;
}; };
// 添加导出功能 // 添加导出功能
const handleExport = (row: AnalysisReport) => { const handleExport = (row) => {
ElMessageBox.confirm("确认导出该分析报告？", "提示", { ElMessageBox.confirm("确认导出该分析报告？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -110,7 +78,7 @@ const handleExport = (row: AnalysisReport) => {
}; };
// 添加图表resize监听 // 添加图表resize监听
let myChart: echarts.ECharts | null = null; let myChart = null;
const initChart = () => { const initChart = () => {
const chartDom = document.getElementById("trendChart"); const chartDom = document.getElementById("trendChart");
@ -266,12 +234,12 @@ const paginatedData = computed(() => {
return tableData.value.slice(start, end); return tableData.value.slice(start, end);
}); });
const handleSizeChange = (val: number) => { const handleSizeChange = (val) => {
pageSize.value = val; pageSize.value = val;
currentPage.value = 1; currentPage.value = 1;
}; };
const handleCurrentChange = (val: number) => { const handleCurrentChange = (val) => {
currentPage.value = val; currentPage.value = val;
}; };
@ -480,7 +448,7 @@ const handleRefresh = () => {
<el-button @click="detailVisible = false">关闭</el-button> <el-button @click="detailVisible = false">关闭</el-button>
<el-button <el-button
type="warning" type="warning"
@click="handleExport(currentReport!)" @click="handleExport(currentReport)"
:disabled="!currentReport" :disabled="!currentReport"
> >
导出 导出
@ -492,7 +460,7 @@ const handleRefresh = () => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.analysis-report { .analysis-report {
.card-header { .card-header {

66
src/views/report/daily/index.vue
View File

@ -1,29 +1,11 @@
<script setup lang="ts"> <script setup>
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'; import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import { Plus, Document, Download, TrendCharts, Connection } from '@element-plus/icons-vue'; import { Plus, Document, Download, TrendCharts, Connection } from '@element-plus/icons-vue';
import * as echarts from 'echarts'; 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, id: 1,
title: "A区巡护日报", title: "A区巡护日报",
@ -60,9 +42,9 @@ const formData = ref({
// 查看详情 // 查看详情
const detailVisible = ref(false); const detailVisible = ref(false);
const currentReport = ref<DailyReport | null>(null); const currentReport = ref(null);
const handleView = (row: DailyReport) => { const handleView = (row) => {
currentReport.value = row; currentReport.value = row;
detailVisible.value = true; detailVisible.value = true;
}; };
@ -78,13 +60,12 @@ const handleSubmit = () => {
}; };
// 趋势图表 // 趋势图表
let trendChart: echarts.ECharts | null = null; let trendChart = null;
// 初始化趋势图表 // 初始化趋势图表
const initTrendChart = () => { const initTrendChart = () => {
const chartDom = document.getElementById('trendChart'); const chartDom = document.getElementById('trendChart');
if (!chartDom) return; if (!chartDom) return;
const myChart = echarts.init(chartDom); const myChart = echarts.init(chartDom);
const option = { const option = {
backgroundColor: 'transparent', backgroundColor: 'transparent',
@ -235,11 +216,10 @@ const handleGenerate = () => {
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'info' type: 'info'
}).then(() => { }).then(() => {
// 模拟自动汇总数据过程
const loadingInstance = ElLoading.service({ const loadingInstance = ElLoading.service({
text: '正在汇总数据，请稍候...' text: '正在汇总数据，请稍候...'
}); });
setTimeout(() => { setTimeout(() => {
loadingInstance.close(); loadingInstance.close();
ElMessage.success('报告生成成功，已自动整合今日巡护记录和监测数据'); ElMessage.success('报告生成成功，已自动整合今日巡护记录和监测数据');
@ -415,8 +395,8 @@ const showTrendAnalysis = ref(false);
{{ currentReport.content }} {{ currentReport.content }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="附件" :span="2"> <el-descriptions-item label="附件" :span="2">
<el-link <el-link
v-for="file in currentReport.attachments" v-for="file in currentReport.attachments"
:key="file" :key="file"
type="primary" type="primary"
style="margin-right: 16px" style="margin-right: 16px"
@ -443,7 +423,7 @@ const showTrendAnalysis = ref(false);
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button> <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> </span>
</template> </template>
</el-dialog> </el-dialog>
@ -481,7 +461,7 @@ const showTrendAnalysis = ref(false);
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.daily-report { .daily-report {
.card-header { .card-header {
@ -498,18 +478,18 @@ const showTrendAnalysis = ref(false);
padding: 20px; padding: 20px;
text-align: center; text-align: center;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
} }
.stat-value { .stat-value {
font-size: 28px; font-size: 28px;
font-weight: 600; font-weight: 600;
color: $primary-color; color: $primary-color;
margin-bottom: 8px; margin-bottom: 8px;
} }
.stat-label { .stat-label {
font-size: 14px; font-size: 14px;
color: $text-secondary; color: $text-secondary;
@ -529,19 +509,19 @@ const showTrendAnalysis = ref(false);
.stat-grid { .stat-grid {
padding: 12px; padding: 12px;
.stat-item { .stat-item {
text-align: center; text-align: center;
padding: 12px; padding: 12px;
background: #f8f9fa; background: #f8f9fa;
border-radius: 4px; border-radius: 4px;
.stat-item-label { .stat-item-label {
font-size: 13px; font-size: 13px;
color: $text-secondary; color: $text-secondary;
margin-bottom: 8px; margin-bottom: 8px;
} }
.stat-item-value { .stat-item-value {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@ -550,11 +530,11 @@ const showTrendAnalysis = ref(false);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 4px; gap: 4px;
.up { .up {
color: $success-color; color: $success-color;
} }
.down { .down {
color: $danger-color; color: $danger-color;
} }
@ -566,7 +546,7 @@ const showTrendAnalysis = ref(false);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
.el-icon { .el-icon {
color: $text-secondary; color: $text-secondary;
cursor: help; cursor: help;
@ -578,15 +558,15 @@ const showTrendAnalysis = ref(false);
padding: 12px; padding: 12px;
background: #f8f9fa; background: #f8f9fa;
border-radius: 4px; border-radius: 4px;
p { p {
margin: 8px 0; margin: 8px 0;
color: $text-regular; color: $text-regular;
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
@ -607,4 +587,4 @@ const showTrendAnalysis = ref(false);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
} }
} }
</style> </style>

35
src/views/reports/analysis/index.vue
View File

@ -1,21 +1,10 @@
<script setup lang="ts"> <script setup>
import { ref, computed, reactive } from "vue"; import { ref, computed, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { onMounted } from "vue"; import { onMounted } from "vue";
interface AnalysisReport { const tableData = ref([
id: number;
title: string;
type: string;
period: string;
author: string;
summary: string;
charts: string[];
createTime: string;
}
const tableData = ref<AnalysisReport[]>([
{ {
id: 1, id: 1,
title: "2024年第一季度水质分析报告", title: "2024年第一季度水质分析报告",
@ -42,7 +31,7 @@ const tableData = ref<AnalysisReport[]>([
const initChart = () => { const initChart = () => {
const chartDom = document.getElementById("analysisChart"); const chartDom = document.getElementById("analysisChart");
if (!chartDom) return; if (!chartDom) return;
const myChart = echarts.init(chartDom); const myChart = echarts.init(chartDom);
const option = { const option = {
title: { title: {
@ -107,7 +96,7 @@ const handleSubmit = () => {
}; };
// 添加导出处理函数 // 添加导出处理函数
const handleExport = (row: AnalysisReport) => { const handleExport = (row) => {
ElMessageBox.confirm( ElMessageBox.confirm(
'确认导出该分析报告？', '确认导出该分析报告？',
'提示', '提示',
@ -130,9 +119,9 @@ const handleExport = (row: AnalysisReport) => {
// 添加查看报告功能 // 添加查看报告功能
const detailVisible = ref(false); const detailVisible = ref(false);
const currentReport = ref<AnalysisReport | null>(null); const currentReport = ref(null);
const handleView = (row: AnalysisReport) => { const handleView = (row) => {
currentReport.value = row; currentReport.value = row;
detailVisible.value = true; detailVisible.value = true;
}; };
@ -168,8 +157,8 @@ const handleView = (row: AnalysisReport) => {
<el-button type="primary" size="small" @click="handleView(row)"> <el-button type="primary" size="small" @click="handleView(row)">
查看 查看
</el-button> </el-button>
<el-button <el-button
type="warning" type="warning"
size="small" size="small"
@click="handleExport(row)" @click="handleExport(row)"
> >
@ -271,9 +260,9 @@ const handleView = (row: AnalysisReport) => {
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button> <el-button @click="detailVisible = false">关闭</el-button>
<el-button <el-button
type="warning" type="warning"
@click="handleExport(currentReport!)" @click="handleExport(currentReport)"
:disabled="!currentReport" :disabled="!currentReport"
> >
导出 导出
@ -285,7 +274,7 @@ const handleView = (row: AnalysisReport) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.analysis-report-container { .analysis-report-container {
.el-card { .el-card {
@ -342,4 +331,4 @@ const handleView = (row: AnalysisReport) => {
color: $text-secondary; color: $text-secondary;
font-size: 14px; font-size: 14px;
} }
</style> </style>

56
src/views/reports/daily/index.vue
View File

@ -1,21 +1,9 @@
<script setup lang="ts"> <script setup>
import { ref, computed, reactive } from "vue"; import { ref, computed, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue"; import { Search } from "@element-plus/icons-vue";
interface DailyReport { const tableData = ref([
id: number;
title: string;
reporter: string;
department: string;
type: string;
content: string;
attachments: string[];
status: string;
createTime: string;
}
const tableData = ref<DailyReport[]>([
{ {
id: 1, id: 1,
title: "A区巡护日报", title: "A区巡护日报",
@ -42,22 +30,22 @@ const tableData = ref<DailyReport[]>([
// 搜索和筛选 // 搜索和筛选
const searchText = ref(""); const searchText = ref("");
const typeFilter = ref<string[]>([]); const typeFilter = ref([]);
const statusFilter = ref<string[]>([]); const statusFilter = ref([]);
const dateRange = ref<[string, string]>(["", ""]); const dateRange = ref(["", ""]);
// 过滤数据 // 过滤数据
const filteredData = computed(() => { const filteredData = computed(() => {
return tableData.value.filter(report => { return tableData.value.filter(report => {
const searchLower = searchText.value.toLowerCase(); const searchLower = searchText.value.toLowerCase();
const textMatch = !searchText.value || const textMatch = !searchText.value ||
report.title.toLowerCase().includes(searchLower) || report.title.toLowerCase().includes(searchLower) ||
report.reporter.toLowerCase().includes(searchLower); report.reporter.toLowerCase().includes(searchLower);
const typeMatch = typeFilter.value.length === 0 || const typeMatch = typeFilter.value.length === 0 ||
typeFilter.value.includes(report.type); typeFilter.value.includes(report.type);
const statusMatch = statusFilter.value.length === 0 || const statusMatch = statusFilter.value.length === 0 ||
statusFilter.value.includes(report.status); statusFilter.value.includes(report.status);
return textMatch && typeMatch && statusMatch; return textMatch && typeMatch && statusMatch;
@ -70,7 +58,7 @@ const formData = reactive({
title: "", title: "",
type: "", type: "",
content: "", content: "",
attachments: [] as string[], attachments: [],
}); });
const handleCreate = () => { const handleCreate = () => {
@ -85,15 +73,15 @@ const handleSubmit = () => {
// 查看报告 // 查看报告
const detailVisible = ref(false); const detailVisible = ref(false);
const currentReport = ref<DailyReport | null>(null); const currentReport = ref(null);
const handleView = (row: DailyReport) => { const handleView = (row) => {
currentReport.value = row; currentReport.value = row;
detailVisible.value = true; detailVisible.value = true;
}; };
// 添加导出处理函数 // 添加导出处理函数
const handleExport = (row: DailyReport) => { const handleExport = (row) => {
ElMessageBox.confirm( ElMessageBox.confirm(
'确认导出该报告？', '确认导出该报告？',
'提示', '提示',
@ -181,15 +169,15 @@ const handleExport = (row: DailyReport) => {
<el-button type="primary" size="small" @click="handleView(row)"> <el-button type="primary" size="small" @click="handleView(row)">
查看 查看
</el-button> </el-button>
<el-button <el-button
type="success" type="success"
size="small" size="small"
:disabled="row.status === '已审核'" :disabled="row.status === '已审核'"
> >
审核 审核
</el-button> </el-button>
<el-button <el-button
type="warning" type="warning"
size="small" size="small"
@click="handleExport(row)" @click="handleExport(row)"
> >
@ -264,8 +252,8 @@ const handleExport = (row: DailyReport) => {
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="附件" :span="2"> <el-descriptions-item label="附件" :span="2">
<div class="attachment-list"> <div class="attachment-list">
<el-link <el-link
v-for="file in currentReport.attachments" v-for="file in currentReport.attachments"
:key="file" :key="file"
type="primary" type="primary"
style="margin-right: 16px" style="margin-right: 16px"
@ -279,9 +267,9 @@ const handleExport = (row: DailyReport) => {
<template #footer> <template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="detailVisible = false">关闭</el-button> <el-button @click="detailVisible = false">关闭</el-button>
<el-button <el-button
type="warning" type="warning"
@click="handleExport(currentReport!)" @click="handleExport(currentReport)"
:disabled="!currentReport" :disabled="!currentReport"
> >
导出 导出
@ -293,7 +281,7 @@ const handleExport = (row: DailyReport) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.daily-report-container { .daily-report-container {
.el-card { .el-card {
@ -341,4 +329,4 @@ const handleExport = (row: DailyReport) => {
justify-content: right; justify-content: right;
} }
} }
</style> </style>

25
src/views/system/data/index.vue
View File

@ -1,22 +1,11 @@
<script setup lang="ts"> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import type { UploadProps } from "element-plus";
import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { Upload, Download, Refresh } from "@element-plus/icons-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, id: 1,
name: "系统完整备份_20240320", name: "系统完整备份_20240320",
@ -36,7 +25,7 @@ const backupRecords = ref<BackupRecord[]>([
]); ]);
// 数据导入上传配置 // 数据导入上传配置
const uploadConfig: UploadProps = { const uploadConfig = {
action: "/api/upload", action: "/api/upload",
multiple: true, multiple: true,
accept: ".xlsx,.csv", accept: ".xlsx,.csv",
@ -75,7 +64,7 @@ const handleBackup = () => {
type: "warning", type: "warning",
}).then(() => { }).then(() => {
ElMessage.success("备份任务已启动"); ElMessage.success("备份任务已启动");
const newBackup: BackupRecord = { const newBackup = {
id: Date.now(), id: Date.now(),
name: `系统备份_${new Date().toISOString().split("T")[0].replace(/-/g, "")}`, name: `系统备份_${new Date().toISOString().split("T")[0].replace(/-/g, "")}`,
size: "处理中", size: "处理中",
@ -97,7 +86,7 @@ const handleBackup = () => {
}; };
// 恢复备份 // 恢复备份
const handleRestore = (record: BackupRecord) => { const handleRestore = (record) => {
if (record.status !== "成功") { if (record.status !== "成功") {
ElMessage.warning("只能恢复成功的备份"); ElMessage.warning("只能恢复成功的备份");
return; return;
@ -113,7 +102,7 @@ const handleRestore = (record: BackupRecord) => {
}; };
// 删除备份 // 删除备份
const handleDelete = (record: BackupRecord) => { const handleDelete = (record) => {
ElMessageBox.confirm("确认删除该备份？", "提示", { ElMessageBox.confirm("确认删除该备份？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -248,7 +237,7 @@ const icons = {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.data-container { .data-container {
.mb-20 { .mb-20 {

43
src/views/system/devices/index.vue
View File

@ -1,22 +1,11 @@
<script setup lang="ts"> <script setup>
import { ref, onUnmounted } from "vue"; import { ref, onUnmounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Plus } from "@element-plus/icons-vue"; 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, id: 1,
name: "A区-水质监测器-01", name: "A区-水质监测器-01",
@ -50,7 +39,7 @@ const deviceTypes = [
// 新增/编辑设备 // 新增/编辑设备
const dialogVisible = ref(false); const dialogVisible = ref(false);
const isEdit = ref(false); const isEdit = ref(false);
const currentDevice = ref<Device | null>(null); const currentDevice = ref(null);
const formData = ref({ const formData = ref({
name: "", name: "",
@ -78,7 +67,7 @@ const handleAdd = () => {
}; };
// 打开编辑弹窗 // 打开编辑弹窗
const handleEdit = (row: Device) => { const handleEdit = (row) => {
isEdit.value = true; isEdit.value = true;
currentDevice.value = row; currentDevice.value = row;
formData.value = { formData.value = {
@ -99,7 +88,7 @@ const handleSubmit = async () => {
if (isEdit.value && currentDevice.value) { if (isEdit.value && currentDevice.value) {
// 编辑模式 // 编辑模式
const index = tableData.value.findIndex( const index = tableData.value.findIndex(
(item) => item.id === currentDevice.value!.id (item) => item.id === currentDevice.value.id
); );
if (index !== -1) { if (index !== -1) {
tableData.value[index] = { tableData.value[index] = {
@ -111,7 +100,7 @@ const handleSubmit = async () => {
} }
} else { } else {
// 新增模式 // 新增模式
const newDevice: Device = { const newDevice = {
id: tableData.value.length + 1, id: tableData.value.length + 1,
...formData.value, ...formData.value,
status: "在线", status: "在线",
@ -141,7 +130,7 @@ const resetForm = () => {
}; };
// 删除设备 // 删除设备
const handleDelete = (row: Device) => { const handleDelete = (row) => {
ElMessageBox.confirm("确认删除该设备？", "提示", { ElMessageBox.confirm("确认删除该设备？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -158,12 +147,12 @@ const handleDelete = (row: Device) => {
}; };
// 远程配置 // 远程配置
const handleConfig = (row: Device) => { const handleConfig = (row) => {
ElMessage.success("正在连接设备..."); ElMessage.success("正在连接设备...");
}; };
// 设备维护 // 设备维护
const handleMaintenance = (row: Device) => { const handleMaintenance = (row) => {
ElMessage.success("已记录维护时间"); ElMessage.success("已记录维护时间");
const index = tableData.value.findIndex((item) => item.id === row.id); const index = tableData.value.findIndex((item) => item.id === row.id);
if (index !== -1) { if (index !== -1) {
@ -206,8 +195,8 @@ const defaultProps = {
// 监控相关 // 监控相关
const monitorVisible = ref(false); const monitorVisible = ref(false);
const currentMonitorDevice = ref<Device | null>(null); const currentMonitorDevice = ref(null);
const monitorChart = ref<echarts.ECharts | null>(null); const monitorChart = ref(null);
// 模拟实时数据 // 模拟实时数据
const realTimeData = ref({ const realTimeData = ref({
@ -257,13 +246,13 @@ const handleAddGroup = () => {
}); });
}; };
const handleNodeClick = (data: any) => { const handleNodeClick = (data) => {
console.log("选中分组:", data); console.log("选中分组:", data);
// 这里可以根据分组筛选设备列表 // 这里可以根据分组筛选设备列表
}; };
// 监控处理 // 监控处理
const handleMonitor = (device: Device) => { const handleMonitor = (device) => {
currentMonitorDevice.value = device; currentMonitorDevice.value = device;
monitorVisible.value = true; monitorVisible.value = true;
initMonitorChart(); initMonitorChart();
@ -330,7 +319,7 @@ const initMonitorChart = () => {
}; };
// 模拟实时数据更新 // 模拟实时数据更新
let dataTimer: number; let dataTimer;
const startRealTimeData = () => { const startRealTimeData = () => {
clearInterval(dataTimer); clearInterval(dataTimer);
dataTimer = setInterval(() => { dataTimer = setInterval(() => {
@ -376,7 +365,7 @@ const startRealTimeData = () => {
}; };
// 检查告警 // 检查告警
const checkAlarms = (data: any) => { const checkAlarms = (data) => {
const { thresholds } = alarmConfig.value; const { thresholds } = alarmConfig.value;
if ( if (
@ -610,7 +599,7 @@ onUnmounted(() => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.device-container { .device-container {
.group-card { .group-card {

17
src/views/system/logs/index.vue
View File

@ -1,21 +1,10 @@
<script setup lang="ts"> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { useSystemLogStore } from '../../../stores/systemLog'; import { useSystemLogStore } from '../../../stores/systemLog';
import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { Download, Delete } from "@element-plus/icons-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(); const systemLogStore = useSystemLogStore();
// 日志类型选项 // 日志类型选项
@ -34,7 +23,7 @@ const statusOptions = [
]; ];
// 获取状态标签类型 // 获取状态标签类型
const getStatusType = (status: string) => { const getStatusType = (status) => {
switch (status) { switch (status) {
case "成功": case "成功":
return "success"; return "success";
@ -184,7 +173,7 @@ const icons = {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.logs-container { .logs-container {
.card-header { .card-header {

26
src/views/system/permissions/index.vue
View File

@ -1,18 +1,8 @@
<script setup lang="ts"> <script setup>
import { ref } from "vue"; import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus"; import { ElMessage, ElMessageBox } from "element-plus";
interface Permission { const tableData = ref([
id: number;
name: string;
code: string;
description: string;
type: string;
status: boolean;
createTime: string;
}
const tableData = ref<Permission[]>([
{ {
id: 1, id: 1,
name: "用户管理", name: "用户管理",
@ -45,7 +35,7 @@ const tableData = ref<Permission[]>([
// 新增/编辑权限 // 新增/编辑权限
const dialogVisible = ref(false); const dialogVisible = ref(false);
const isEdit = ref(false); const isEdit = ref(false);
const currentPermission = ref<Permission | null>(null); const currentPermission = ref(null);
const formData = ref({ const formData = ref({
name: "", name: "",
@ -73,7 +63,7 @@ const handleAdd = () => {
}; };
// 打开编辑弹窗 // 打开编辑弹窗
const handleEdit = (row: Permission) => { const handleEdit = (row) => {
isEdit.value = true; isEdit.value = true;
currentPermission.value = row; currentPermission.value = row;
formData.value = { formData.value = {
@ -95,7 +85,7 @@ const handleSubmit = async () => {
if (isEdit.value && currentPermission.value) { if (isEdit.value && currentPermission.value) {
// 编辑模式：更新表格中的数据 // 编辑模式：更新表格中的数据
const index = tableData.value.findIndex( const index = tableData.value.findIndex(
(item) => item.id === currentPermission.value!.id (item) => item.id === currentPermission.value.id
); );
if (index !== -1) { if (index !== -1) {
tableData.value[index] = { tableData.value[index] = {
@ -106,7 +96,7 @@ const handleSubmit = async () => {
} }
} else { } else {
// 新增模式：添加到表格 // 新增模式：添加到表格
const newPermission: Permission = { const newPermission = {
id: tableData.value.length + 1, id: tableData.value.length + 1,
...formData.value, ...formData.value,
createTime: new Date().toLocaleString(), createTime: new Date().toLocaleString(),
@ -142,7 +132,7 @@ const handleDialogClose = () => {
}; };
// 删除权限 // 删除权限
const handleDelete = (row: Permission) => { const handleDelete = (row) => {
ElMessageBox.confirm("确认删除该权限？", "提示", { ElMessageBox.confirm("确认删除该权限？", "提示", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -246,7 +236,7 @@ const handleDelete = (row: Permission) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "./styles/variables" as v;
.permission-container { .permission-container {
.el-card { .el-card {

18
src/views/system/roles/index.vue
View File

@ -1,15 +1,7 @@
<script setup lang="ts"> <script setup>
import { ref } from "vue"; import { ref } from "vue";
interface RoleData { const tableData = ref([
id: number;
name: string;
description: string;
permissions: string[];
createTime: string;
}
const tableData = ref<RoleData[]>([
{ {
id: 1, id: 1,
name: "超级管理员", name: "超级管理员",
@ -26,11 +18,11 @@ const tableData = ref<RoleData[]>([
}, },
]); ]);
const handleEdit = (row: RoleData) => { const handleEdit = (row) => {
console.log("编辑角色:", row); console.log("编辑角色:", row);
}; };
const handleDelete = (row: RoleData) => { const handleDelete = (row) => {
console.log("删除角色:", row); console.log("删除角色:", row);
}; };
</script> </script>
@ -73,7 +65,7 @@ const handleDelete = (row: RoleData) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "../../../styles/variables.scss" as *;
.role-container { .role-container {
.el-card { .el-card {

6
src/views/system/settings/index.vue
View File

@ -1,4 +1,4 @@
<script setup lang="ts"> <script setup>
import { ref } from "vue"; import { ref } from "vue";
// 系统参数配置 // 系统参数配置
@ -31,7 +31,7 @@ const alertConfig = ref({
}); });
// 保存配置 // 保存配置
const handleSave = (type: string) => { const handleSave = (type) => {
// 这里模拟保存配置 // 这里模拟保存配置
console.log( console.log(
`保存${type}配置:`, `保存${type}配置:`,
@ -174,7 +174,7 @@ const handleSave = (type: string) => {
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "../../../styles/variables.scss" as *;
.settings-container { .settings-container {
.mb-20 { .mb-20 {

470
src/views/system/users/index.vue
View File

@ -1,41 +1,260 @@
<script setup lang="ts"> <script setup>
import { ref } from "vue"; 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 { const tableData = ref([]);
id: number; const allData = ref([]); // 保存所有数据
username: string; const loading = ref(false);
role: string; const total = ref(0);
email: string;
status: boolean;
createTime: string;
}
const tableData = ref<UserData[]>([ // 查询参数
{ const queryParams = ref({
id: 1, username: '',
username: "admin", role: '',
role: "超级管理员", status: ''
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 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> </script>
<template> <template>
@ -44,14 +263,50 @@ const handleDelete = (row: UserData) => {
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>用户管理</span> <span>用户管理</span>
<el-button type="primary">新增用户</el-button> <el-button type="primary" @click="handleAdd">新增用户</el-button>
</div> </div>
</template> </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="id" label="ID" width="80" />
<el-table-column prop="username" label="用户名" width="120" /> <el-table-column prop="real_name" label="用户名" width="120" />
<el-table-column prop="role" label="角色" width="120" /> <el-table-column prop="role.name" label="角色" width="120" />
<el-table-column prop="email" label="邮箱" /> <el-table-column prop="email" label="邮箱" />
<el-table-column prop="status" label="状态" width="100"> <el-table-column prop="status" label="状态" width="100">
<template #default="{ row }"> <template #default="{ row }">
@ -60,24 +315,121 @@ const handleDelete = (row: UserData) => {
</el-tag> </el-tag>
</template> </template>
</el-table-column> </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"> <el-table-column label="操作" width="180">
<template #default="{ row }"> <template #default="{ row }">
<el-button type="primary" size="small" @click="handleEdit(row)"> <el-button type="primary" link @click="handleEdit(row)">
编辑 编辑
</el-button> </el-button>
<el-button type="danger" size="small" @click="handleDelete(row)"> <el-button type="danger" link @click="handleDelete(row)">
删除 删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </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-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> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../../styles/variables.scss"; @use "../../../styles/variables.scss" as *;
.user-container { .user-container {
.el-card { .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) { :deep(.el-table) {
th.el-table__cell { th.el-table__cell {
background-color: #fafafa; background-color: #fafafa;
@ -120,4 +491,23 @@ const handleDelete = (row: UserData) => {
.el-tag { .el-tag {
border-radius: 2px; 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> </style>

1
src/vite-env.d.ts vendored
View File

@ -1 +0,0 @@
/// <reference types="vite/client" />

14
tsconfig.app.json
View File

@ -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"]
}

13
tsconfig.json
View File

@ -1,13 +0,0 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}

24
tsconfig.node.json
View File

@ -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
vite.config.ts → vite.config.js
View File

@ -9,5 +9,12 @@ export default defineConfig({
alias: { alias: {
'@': path.resolve(__dirname, 'src') '@': path.resolve(__dirname, 'src')
} }
},
build: {
rollupOptions: {
input: {
main: path.resolve(__dirname, 'index.html')
}
}
} }
}) })