调整文件位置
This commit is contained in:
@@ -1,319 +0,0 @@
|
||||
<template>
|
||||
<div class="device-list">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="title-container">
|
||||
<h2 class="page-title">设备管理</h2>
|
||||
<el-button type="text" @click="loadDevices" class="refresh-btn" title="刷新设备列表">
|
||||
<el-icon :size="20"><Refresh /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="addDevice">添加设备</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton animated />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error">
|
||||
<el-alert
|
||||
title="获取设备数据失败"
|
||||
:description="error"
|
||||
type="error"
|
||||
show-icon
|
||||
closable
|
||||
@close="error = null"
|
||||
/>
|
||||
<el-button type="primary" @click="loadDevices" class="retry-btn">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 设备列表 -->
|
||||
<el-table
|
||||
v-else
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:fit="true"
|
||||
table-layout="auto"
|
||||
row-key="id"
|
||||
default-expand-all
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
:row-class-name="tableRowClassName"
|
||||
:highlight-current-row="false"
|
||||
:scrollbar-always-on="true"
|
||||
@sort-change="handleSortChange">
|
||||
<el-table-column width="40"></el-table-column>
|
||||
<el-table-column prop="id" label="ID" min-width="100" sortable="custom" />
|
||||
<el-table-column prop="name" label="名称" min-width="120" sortable="custom" />
|
||||
<el-table-column prop="type" label="类型" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ formatDeviceType(scope.row.type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="device_template_name" label="设备模板" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ scope.row.type === 'device' ? scope.row.device_template_name || '-' : '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="location" label="地址描述" min-width="150" />
|
||||
<el-table-column label="操作" min-width="120" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="editDevice(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备表单对话框 -->
|
||||
<DeviceForm
|
||||
v-model:visible="dialogVisible"
|
||||
:device-data="currentDevice"
|
||||
:is-edit="isEdit"
|
||||
@success="onDeviceSuccess"
|
||||
@cancel="dialogVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import deviceService from '../services/deviceService.js';
|
||||
import DeviceForm from './DeviceForm.vue';
|
||||
|
||||
export default {
|
||||
name: 'DeviceList',
|
||||
components: {
|
||||
DeviceForm,
|
||||
Refresh // 导入刷新图标组件
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [], // 树形表格数据
|
||||
originalTableData: [], // 存储原始未排序的树形数据
|
||||
allDevices: [], // 存储所有设备用于构建树形结构
|
||||
loading: false,
|
||||
error: null,
|
||||
saving: false,
|
||||
dialogVisible: false,
|
||||
currentDevice: {},
|
||||
isEdit: false
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadDevices();
|
||||
},
|
||||
methods: {
|
||||
// 加载设备列表
|
||||
async loadDevices() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const data = await deviceService.getDevices();
|
||||
// Default sort by ID ascending
|
||||
data.sort((a, b) => a.id - b.id);
|
||||
this.allDevices = data;
|
||||
this.tableData = this.buildTreeData(data);
|
||||
this.originalTableData = [...this.tableData]; // 保存原始顺序
|
||||
} catch (err) {
|
||||
this.error = err.message || '未知错误';
|
||||
console.error('加载设备列表失败:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 处理表格排序
|
||||
handleSortChange({ prop, order }) {
|
||||
if (!order) {
|
||||
// 如果取消排序，则恢复原始顺序
|
||||
this.tableData = [...this.originalTableData];
|
||||
return;
|
||||
}
|
||||
|
||||
const sortFactor = order === 'ascending' ? 1 : -1;
|
||||
|
||||
// 只对顶层项（区域主控）进行排序
|
||||
this.tableData.sort((a, b) => {
|
||||
const valA = a[prop];
|
||||
const valB = b[prop];
|
||||
|
||||
if (valA < valB) {
|
||||
return -1 * sortFactor;
|
||||
}
|
||||
if (valA > valB) {
|
||||
return 1 * sortFactor;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
// 构建树形结构数据
|
||||
buildTreeData(devices) {
|
||||
const areaControllers = devices.filter(device => device.type === 'area_controller');
|
||||
|
||||
return areaControllers.map(controller => {
|
||||
const children = devices.filter(device =>
|
||||
device.type === 'device' && device.parent_id === controller.id
|
||||
).map(childDevice => {
|
||||
// 对于作为子设备的普通设备，确保它们没有 'children' 属性，并显式设置 hasChildren 为 false。
|
||||
const { children, ...rest } = childDevice;
|
||||
return { ...rest, hasChildren: false }; // 显式添加 hasChildren: false
|
||||
});
|
||||
|
||||
return {
|
||||
...controller,
|
||||
children: children.length > 0 ? children : undefined
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化设备类型显示
|
||||
formatDeviceType(type) {
|
||||
const typeMap = {
|
||||
'area_controller': '区域主控',
|
||||
'device': '普通设备'
|
||||
};
|
||||
return typeMap[type] || type || '-';
|
||||
},
|
||||
|
||||
addDevice() {
|
||||
// 默认添加普通设备，如果需要添加区域主控，可以在DeviceForm中选择或通过其他入口触发
|
||||
this.currentDevice = { type: 'device' };
|
||||
this.isEdit = false;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
|
||||
editDevice(device) {
|
||||
const processedDevice = { ...device };
|
||||
|
||||
if (processedDevice.properties && typeof processedDevice.properties === 'string') {
|
||||
try {
|
||||
processedDevice.properties = JSON.parse(processedDevice.properties);
|
||||
} catch (e) {
|
||||
console.error('解析properties失败:', e);
|
||||
processedDevice.properties = {};
|
||||
}
|
||||
}
|
||||
|
||||
this.currentDevice = processedDevice;
|
||||
this.isEdit = true;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
|
||||
async deleteDevice(device) {
|
||||
try {
|
||||
await this.$confirm('确认删除该设备吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
await deviceService.deleteDevice(device);
|
||||
this.$message.success('删除成功');
|
||||
await this.loadDevices();
|
||||
} catch (err) {
|
||||
if (err !== 'cancel') {
|
||||
this.$message.error('删除失败: ' + (err.message || '未知错误'));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async onDeviceSuccess() {
|
||||
this.$message.success(this.isEdit ? '设备更新成功' : '设备添加成功');
|
||||
this.dialogVisible = false;
|
||||
await this.loadDevices();
|
||||
},
|
||||
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
if (row.type === 'area_controller') {
|
||||
return 'is-area-controller-row';
|
||||
} else if (row.type === 'device') {
|
||||
return 'is-device-row';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.device-list {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* 确保区域主控设备始终高亮显示 */
|
||||
:deep(.is-area-controller-row) {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
/* 隐藏普通设备行的展开图标 */
|
||||
:deep(.is-device-row) .el-table__expand-icon {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.device-list {
|
||||
padding: 10px;
|
||||
}
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,215 +0,0 @@
|
||||
<template>
|
||||
<div class="device-template-list">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="title-container">
|
||||
<h2 class="page-title">设备模板管理</h2>
|
||||
<el-button type="text" @click="loadDeviceTemplates" class="refresh-btn" title="刷新设备模板列表">
|
||||
<el-icon :size="20"><Refresh /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="addTemplate">新增模板</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton animated />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error">
|
||||
<el-alert
|
||||
title="获取设备模板数据失败"
|
||||
:description="error"
|
||||
type="error"
|
||||
show-icon
|
||||
closable
|
||||
@close="error = null"
|
||||
/>
|
||||
<el-button type="primary" @click="loadDeviceTemplates" class="retry-btn">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 设备模板列表 -->
|
||||
<el-table
|
||||
v-else
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:fit="true"
|
||||
table-layout="auto"
|
||||
row-key="id"
|
||||
:highlight-current-row="false"
|
||||
:scrollbar-always-on="true"
|
||||
>
|
||||
<el-table-column prop="id" label="ID" min-width="80" />
|
||||
<el-table-column prop="name" label="名称" min-width="150" />
|
||||
<el-table-column prop="manufacturer" label="制造商" min-width="120" />
|
||||
<el-table-column prop="description" label="描述" min-width="200" />
|
||||
<el-table-column prop="category" label="类别" min-width="100">
|
||||
<template #default="scope">
|
||||
{{ formatCategory(scope.row.category) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 移除创建时间和更新时间列 -->
|
||||
<!-- <el-table-column prop="created_at" label="创建时间" min-width="160" /> -->
|
||||
<!-- <el-table-column prop="updated_at" label="更新时间" min-width="160" /> -->
|
||||
<el-table-column label="操作" min-width="150" align="center">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="editTemplate(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- 设备模板表单对话框 -->
|
||||
<DeviceTemplateForm
|
||||
v-model:visible="dialogVisible"
|
||||
:template-data="currentTemplate"
|
||||
:is-edit="isEdit"
|
||||
@success="onTemplateSuccess"
|
||||
@cancel="dialogVisible = false"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import deviceTemplateService from '../services/deviceTemplateService.js';
|
||||
import DeviceTemplateForm from './DeviceTemplateForm.vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: 'DeviceTemplateList',
|
||||
components: {
|
||||
DeviceTemplateForm,
|
||||
Refresh
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
loading: false,
|
||||
error: null,
|
||||
dialogVisible: false,
|
||||
currentTemplate: {},
|
||||
isEdit: false
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadDeviceTemplates();
|
||||
},
|
||||
methods: {
|
||||
async loadDeviceTemplates() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
try {
|
||||
const response = await deviceTemplateService.getDeviceTemplates();
|
||||
// 确保只将数组部分赋值给 tableData
|
||||
this.tableData = response.data || [];
|
||||
} catch (err) {
|
||||
this.error = err.message || '未知错误';
|
||||
console.error('加载设备模板列表失败:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
formatCategory(category) {
|
||||
const categoryMap = {
|
||||
'actuator': '执行器',
|
||||
'sensor': '传感器'
|
||||
};
|
||||
return categoryMap[category] || category || '-';
|
||||
},
|
||||
addTemplate() {
|
||||
this.currentTemplate = {};
|
||||
this.isEdit = false;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
editTemplate(template) {
|
||||
// 深度拷贝，避免直接修改表格数据
|
||||
this.currentTemplate = JSON.parse(JSON.stringify(template));
|
||||
this.isEdit = true;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
async deleteTemplate(template) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确认删除设备模板 "${template.name}" 吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
);
|
||||
await deviceTemplateService.deleteDeviceTemplate(template.id);
|
||||
ElMessage.success('删除成功');
|
||||
await this.loadDeviceTemplates();
|
||||
} catch (err) {
|
||||
if (err !== 'cancel') {
|
||||
ElMessage.error('删除失败: ' + (err.message || '未知错误'));
|
||||
}
|
||||
}
|
||||
},
|
||||
onTemplateSuccess() {
|
||||
ElMessage.success(this.isEdit ? '设备模板更新成功' : '设备模板添加成功');
|
||||
this.dialogVisible = false;
|
||||
this.loadDeviceTemplates();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.device-template-list {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,125 +0,0 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<el-card class="welcome-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>欢迎使用猪场管理系统</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="content">
|
||||
<p>这是一个用于管理猪场设备和监控猪场状态的系统。</p>
|
||||
<p>通过本系统，您可以：</p>
|
||||
<ul>
|
||||
<li>查看所有设备状态</li>
|
||||
<li>添加和管理新设备</li>
|
||||
<li>监控猪场环境参数</li>
|
||||
<li>接收异常报警信息</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<div class="stats">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">24</div>
|
||||
<div class="stat-label">设备总数</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">2</div>
|
||||
<div class="stat-label">异常设备</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">16</div>
|
||||
<div class="stat-label">在线设备</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card class="stat-card">
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">8</div>
|
||||
<div class="stat-label">离线设备</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Home'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.welcome-card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.content p {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.content ul {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.home {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.el-col {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<el-card class="login-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>系统登录</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
:rules="loginRules"
|
||||
label-width="80px"
|
||||
class="login-form"
|
||||
@keyup.enter="handleLogin"
|
||||
>
|
||||
<el-form-item label="用户名" prop="identifier">
|
||||
<el-input v-model="loginForm.identifier" placeholder="请输入用户名/邮箱/手机号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input type="password" v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%;">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import apiClient from '../api/index.js';
|
||||
|
||||
export default {
|
||||
name: 'LoginForm',
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const loginFormRef = ref(null);
|
||||
const loading = ref(false);
|
||||
|
||||
const loginForm = reactive({
|
||||
identifier: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
const loginRules = reactive({
|
||||
identifier: [
|
||||
{ required: true, message: '请输入用户名/邮箱/手机号', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!loginFormRef.value) return;
|
||||
loginFormRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await apiClient.users.login(loginForm);
|
||||
if (response.code === 2000 && response.data && response.data.token) {
|
||||
localStorage.setItem('jwt_token', response.data.token);
|
||||
localStorage.setItem('username', response.data.username); // 存储用户名
|
||||
ElMessage.success('登录成功！');
|
||||
router.push('/'); // 登录成功后跳转到首页
|
||||
} else {
|
||||
ElMessage.error(response.message || '登录失败，请检查用户名或密码！');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('登录请求失败:', error);
|
||||
ElMessage.error('登录请求失败，请稍后再试！');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
loginFormRef,
|
||||
loginForm,
|
||||
loginRules,
|
||||
loading,
|
||||
handleLogin,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 400px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,400 +0,0 @@
|
||||
<template>
|
||||
<div class="plan-list">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="title-container">
|
||||
<h2 class="page-title">计划管理</h2>
|
||||
<el-button type="text" @click="loadPlans" class="refresh-btn" title="刷新计划列表">
|
||||
<el-icon :size="20"><Refresh /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="addPlan">添加计划</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="loading" class="loading">
|
||||
<el-skeleton animated />
|
||||
</div>
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-else-if="error" class="error">
|
||||
<el-alert
|
||||
title="获取计划数据失败"
|
||||
:description="error"
|
||||
type="error"
|
||||
show-icon
|
||||
closable
|
||||
@close="error = null"
|
||||
/>
|
||||
<el-button type="primary" @click="loadPlans" class="retry-btn">重新加载</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-else
|
||||
:data="plans"
|
||||
style="width: 100%"
|
||||
class="plan-list-table"
|
||||
:fit="true"
|
||||
:scrollbar-always-on="true"
|
||||
@sort-change="handleSortChange">
|
||||
<el-table-column prop="id" label="计划ID" min-width="100" sortable="custom" />
|
||||
<el-table-column prop="name" label="计划名称" min-width="120" sortable="custom" />
|
||||
<el-table-column prop="description" label="计划描述" min-width="150" />
|
||||
<el-table-column prop="execution_type" label="执行类型" min-width="150" sortable="custom">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.execution_type === 'manual'">手动</el-tag>
|
||||
<el-tag v-else-if="scope.row.execute_num === 0" type="success">自动(无限执行)</el-tag>
|
||||
<el-tag v-else type="warning">自动({{ scope.row.execute_num }}次)</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="execute_count" label="已执行次数" min-width="120" sortable="custom" />
|
||||
<el-table-column prop="status" label="状态" min-width="100" sortable="custom">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.status === 0" type="danger">禁用计划</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 1" type="success">启用计划</el-tag>
|
||||
<el-tag v-else-if="scope.row.status === 3" type="danger">执行失败</el-tag>
|
||||
<el-tag v-else type="info">执行完毕</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cron_expression" label="下次执行时间" min-width="150" sortable="custom">
|
||||
<template #default="scope">
|
||||
{{ formatNextExecutionTime(scope.row.cron_expression) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="280">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="editPlan(scope.row)">编辑</el-button>
|
||||
<el-button size="small" @click="showDetails(scope.row)">详情</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
:type="scope.row.status === 1 ? 'warning' : 'primary'"
|
||||
@click="scope.row.status === 1 ? stopPlan(scope.row) : startPlan(scope.row)"
|
||||
:loading="stoppingPlanId === scope.row.id || startingPlanId === scope.row.id"
|
||||
>
|
||||
{{ scope.row.status === 1 ? '停止' : '启动' }}
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" @click="deletePlan(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
</el-card>
|
||||
|
||||
<!-- 计划表单 -->
|
||||
<PlanForm
|
||||
v-model:visible="dialogVisible"
|
||||
:plan-data="currentPlan"
|
||||
:is-edit="isEdit"
|
||||
@success="handlePlanSuccess"
|
||||
@cancel="handlePlanCancel"
|
||||
/>
|
||||
|
||||
<!-- 计划详情 -->
|
||||
<el-dialog
|
||||
v-model="detailsVisible"
|
||||
title="计划详情"
|
||||
width="70%"
|
||||
top="5vh"
|
||||
>
|
||||
<plan-detail
|
||||
v-if="detailsVisible"
|
||||
:plan-id="selectedPlanIdForDetails"
|
||||
/>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="detailsVisible = false">关闭</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Refresh } from '@element-plus/icons-vue';
|
||||
import apiClient from '../api/index.js';
|
||||
import PlanForm from './PlanForm.vue';
|
||||
import PlanDetail from './PlanDetail.vue'; // 导入新组件
|
||||
import cronParser from 'cron-parser';
|
||||
|
||||
export default {
|
||||
name: 'PlanList',
|
||||
components: {
|
||||
PlanForm,
|
||||
PlanDetail, // 注册新组件
|
||||
Refresh
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
plans: [],
|
||||
originalPlans: [], // Store the original unsorted list
|
||||
dialogVisible: false,
|
||||
detailsVisible: false, // 控制详情对话框
|
||||
isEdit: false,
|
||||
loading: false,
|
||||
error: null,
|
||||
currentPlan: {
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
execution_type: 'automatic',
|
||||
execute_num: 0,
|
||||
cron_expression: ''
|
||||
},
|
||||
selectedPlanIdForDetails: null, // 当前要查看详情的计划ID
|
||||
startingPlanId: null,
|
||||
stoppingPlanId: null
|
||||
};
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadPlans();
|
||||
},
|
||||
methods: {
|
||||
// 加载计划列表
|
||||
async loadPlans() {
|
||||
this.loading = true;
|
||||
this.error = null;
|
||||
|
||||
try {
|
||||
const response = await apiClient.plans.getPlans(); // 更正此处
|
||||
let fetchedPlans = response.data?.plans || [];
|
||||
// Default sort by ID ascending
|
||||
fetchedPlans.sort((a, b) => a.id - b.id);
|
||||
this.plans = fetchedPlans;
|
||||
this.originalPlans = [...this.plans]; // Keep a copy of the original order
|
||||
} catch (err) {
|
||||
this.error = err.message || '未知错误';
|
||||
console.error('加载计划列表失败:', err);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 处理表格排序
|
||||
handleSortChange({ prop, order }) {
|
||||
if (!order) {
|
||||
// 恢复原始顺序
|
||||
this.plans = [...this.originalPlans];
|
||||
return;
|
||||
}
|
||||
|
||||
const sortFactor = order === 'ascending' ? 1 : -1;
|
||||
|
||||
this.plans.sort((a, b) => {
|
||||
let valA = a[prop];
|
||||
let valB = b[prop];
|
||||
|
||||
// '下次执行时间' 列的特殊排序逻辑
|
||||
if (prop === 'cron_expression') {
|
||||
try {
|
||||
const parser = cronParser.default || cronParser;
|
||||
valA = valA ? parser.parse(valA).next().toDate().getTime() : 0;
|
||||
} catch (e) {
|
||||
valA = 0; // 无效的 cron 表达式排在前面
|
||||
}
|
||||
try {
|
||||
const parser = cronParser.default || cronParser;
|
||||
valB = valB ? parser.parse(valB).next().toDate().getTime() : 0;
|
||||
} catch (e) {
|
||||
valB = 0;
|
||||
}
|
||||
}
|
||||
|
||||
if (valA < valB) {
|
||||
return -1 * sortFactor;
|
||||
}
|
||||
if (valA > valB) {
|
||||
return 1 * sortFactor;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
},
|
||||
|
||||
// 格式化下次执行时间
|
||||
formatNextExecutionTime(cronExpression) {
|
||||
if (!cronExpression) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
try {
|
||||
// 正确使用cron-parser库
|
||||
const parser = cronParser.default || cronParser;
|
||||
const interval = parser.parse(cronExpression);
|
||||
const next = interval.next().toDate();
|
||||
return next.toLocaleString('zh-CN');
|
||||
} catch (err) {
|
||||
console.error('解析cron表达式失败:', err);
|
||||
return '无效的表达式';
|
||||
}
|
||||
},
|
||||
|
||||
addPlan() {
|
||||
this.currentPlan = {
|
||||
id: null,
|
||||
name: '',
|
||||
description: '',
|
||||
execution_type: 'automatic',
|
||||
execute_num: 0,
|
||||
cron_expression: ''
|
||||
};
|
||||
this.isEdit = false;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
|
||||
showDetails(plan) {
|
||||
this.selectedPlanIdForDetails = plan.id;
|
||||
this.detailsVisible = true;
|
||||
},
|
||||
|
||||
editPlan(plan) {
|
||||
this.currentPlan = { ...plan };
|
||||
this.isEdit = true;
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
|
||||
async deletePlan(plan) {
|
||||
try {
|
||||
await this.$confirm('确认删除该计划吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
});
|
||||
|
||||
await apiClient.plans.deletePlan(plan.id);
|
||||
this.$message.success('删除成功');
|
||||
await this.loadPlans();
|
||||
} catch (err) {
|
||||
if (err !== 'cancel') {
|
||||
this.$message.error('删除失败: ' + (err.message || '未知错误'));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
async startPlan(plan) {
|
||||
try {
|
||||
this.startingPlanId = plan.id;
|
||||
await apiClient.plans.startPlan(plan.id);
|
||||
this.$message.success('计划启动成功');
|
||||
await this.loadPlans();
|
||||
} catch (err) {
|
||||
this.$message.error('启动失败: ' + (err.message || '未知错误'));
|
||||
} finally {
|
||||
this.startingPlanId = null;
|
||||
}
|
||||
},
|
||||
|
||||
async stopPlan(plan) {
|
||||
try {
|
||||
this.stoppingPlanId = plan.id;
|
||||
await apiClient.plans.stopPlan(plan.id);
|
||||
this.$message.success('计划停止成功');
|
||||
await this.loadPlans();
|
||||
} catch (err) {
|
||||
this.$message.error('停止失败: ' + (err.message || '未知错误'));
|
||||
} finally {
|
||||
this.stoppingPlanId = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 处理计划表单提交成功
|
||||
async handlePlanSuccess(planData) {
|
||||
try {
|
||||
if (this.isEdit) {
|
||||
// 编辑计划
|
||||
await apiClient.plans.updatePlan(planData.id, planData);
|
||||
this.$message.success('计划更新成功');
|
||||
} else {
|
||||
// 添加新计划
|
||||
const planRequest = {
|
||||
...planData,
|
||||
content_type: 'tasks' // 默认使用任务类型
|
||||
};
|
||||
|
||||
await apiClient.plans.createPlan(planRequest);
|
||||
this.$message.success('计划添加成功');
|
||||
}
|
||||
|
||||
await this.loadPlans();
|
||||
} catch (err) {
|
||||
this.$message.error('保存失败: ' + (err.message || '未知错误'));
|
||||
}
|
||||
},
|
||||
|
||||
// 处理计划表单取消
|
||||
handlePlanCancel() {
|
||||
this.dialogVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plan-list {
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.plan-list-table :deep(tbody)::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.plan-list {
|
||||
padding: 10px;
|
||||
}
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user