forked from dyf/dyf-vue-ui
Compare commits
4 Commits
4749cdce3c
...
92e22812d7
| Author | SHA1 | Date | |
|---|---|---|---|
| 92e22812d7 | |||
| c95c0e65d2 | |||
| a31318aa1a | |||
| 520d6b2b1a |
@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
|
||||
VITE_APP_ENV = 'development'
|
||||
|
||||
# 开发环境
|
||||
# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
||||
VITE_APP_BASE_API = 'http://192.168.110.54:8000'
|
||||
VITE_APP_BASE_API = 'http://47.120.79.150/backend'
|
||||
#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
|
||||
# VITE_APP_BASE_API = 'http://localhost:8000'
|
||||
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@
|
||||
"jsencrypt": "3.3.2",
|
||||
"mitt": "^3.0.1",
|
||||
"nprogress": "0.2.0",
|
||||
"paho-mqtt": "^1.1.0",
|
||||
"pinia": "3.0.2",
|
||||
"qrcode-vue3": "^1.7.1",
|
||||
"screenfull": "6.0.2",
|
||||
|
||||
@ -3,14 +3,14 @@ export interface deviceQuery {
|
||||
pageNum: number;
|
||||
deviceId: string;
|
||||
deviceName: string;
|
||||
deviceStatus: string;
|
||||
onlineStatus: string;
|
||||
deviceMac: string;
|
||||
deviceImei: string;
|
||||
personnelBy: string;
|
||||
communicationMode: string;
|
||||
pageSize: Number;
|
||||
deviceType: string;
|
||||
content:string
|
||||
content: string
|
||||
|
||||
}
|
||||
export interface deviceVO {
|
||||
@ -20,7 +20,7 @@ export interface deviceVO {
|
||||
onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
|
||||
lng?: number; // 经度（地图打点用）
|
||||
lat?: number; // 纬度（地图打点用
|
||||
|
||||
|
||||
// 其他字段...
|
||||
}
|
||||
// 1. 定义设备详情的类型（根据接口返回字段调整！关键：和后端返回的字段名一致）
|
||||
@ -42,7 +42,7 @@ export interface DeviceDetail {
|
||||
name: string; // 姓名
|
||||
code: string; // ID（身份证/工号）
|
||||
};
|
||||
|
||||
chargeState: string
|
||||
}
|
||||
// 定义灯光模式的类型接口
|
||||
export interface LightMode {
|
||||
|
||||
BIN
src/assets/images/path.png
Normal file
BIN
src/assets/images/path.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 408 B |
@ -28,7 +28,7 @@
|
||||
// 使用CSS变量定义边框样式，支持动态修改
|
||||
border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
|
||||
box-shadow: var(--sidebarBoxShadow);
|
||||
|
||||
|
||||
// 备用方案：如果CSS变量不支持，使用默认样式
|
||||
@supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
|
||||
border-right: none;
|
||||
@ -81,11 +81,14 @@
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-menu-item,
|
||||
.el-sub-menu,
|
||||
.menu-title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
font-family: Microsoft YaHei;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.el-menu-item .el-menu-tooltip__trigger {
|
||||
@ -100,6 +103,7 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu-title-noDropdown,
|
||||
.el-sub-menu__title {
|
||||
&:hover {
|
||||
@ -108,7 +112,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .is-active > .el-sub-menu__title {
|
||||
& .theme-dark .is-active>.el-sub-menu__title {
|
||||
color: #ffffff !important;
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
border-radius: 4px;
|
||||
@ -116,16 +120,17 @@
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .el-sub-menu .el-menu-item {
|
||||
min-width: $base-sidebar-width !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .theme-dark .el-sub-menu .el-menu-item {
|
||||
background-color: $base-sub-menu-background !important;
|
||||
|
||||
@ -135,7 +140,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
& .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
& .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .theme-dark .el-menu-item {
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
@ -143,7 +148,8 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
& .nest-menu .el-sub-menu > .el-sub-menu__title,
|
||||
|
||||
& .nest-menu .el-sub-menu>.el-sub-menu__title,
|
||||
& .el-menu-item {
|
||||
&:hover {
|
||||
// you can use $sub-menuHover
|
||||
@ -178,7 +184,7 @@
|
||||
.el-sub-menu {
|
||||
overflow: hidden;
|
||||
|
||||
& > .el-sub-menu__title {
|
||||
&>.el-sub-menu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
@ -189,15 +195,16 @@
|
||||
|
||||
.el-menu--collapse {
|
||||
.el-sub-menu {
|
||||
& > .el-sub-menu__title {
|
||||
& > span {
|
||||
&>.el-sub-menu__title {
|
||||
&>span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
& > i {
|
||||
|
||||
&>i {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
@ -234,6 +241,7 @@
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
@ -243,7 +251,7 @@
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
& > .el-menu {
|
||||
&>.el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
@ -286,7 +294,7 @@
|
||||
}
|
||||
|
||||
// 子菜单激活状态
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
.el-sub-menu.is-active>.el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
@ -299,7 +307,7 @@
|
||||
.sidebar-container {
|
||||
// 确保背景色与图片一致
|
||||
background: #2c3e50 !important;
|
||||
|
||||
|
||||
.el-menu-item {
|
||||
&.is-active {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
@ -310,9 +318,9 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.el-sub-menu {
|
||||
&.is-active > .el-sub-menu__title {
|
||||
&.is-active>.el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
@ -321,12 +329,12 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 子菜单项激活状态（只有文字颜色变化，无背景）
|
||||
.el-sub-menu .el-menu-item {
|
||||
&.is-active {
|
||||
background: transparent !important;
|
||||
color: #409eff !important;
|
||||
color: rgba(1, 159, 228, 1) !important;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
@ -341,35 +349,35 @@
|
||||
box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
|
||||
border-right: none !important;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-logo-container {
|
||||
background: #2c3e50 !important;
|
||||
}
|
||||
|
||||
|
||||
.el-menu {
|
||||
background: #2c3e50 !important;
|
||||
}
|
||||
|
||||
|
||||
// 非激活菜单项样式
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9 !important;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 激活的主菜单项（正确的渐变背景）
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
.el-sub-menu.is-active>.el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
// 激活的子菜单项（只有蓝色文字，无背景）
|
||||
.el-sub-menu .el-menu-item.is-active {
|
||||
background: transparent !important;
|
||||
@ -378,17 +386,17 @@
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
// 子菜单背景色
|
||||
.el-sub-menu .el-menu {
|
||||
background: #1f2d3d !important;
|
||||
background: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15), rgba(0, 87, 159, 0) 100%) !important;
|
||||
}
|
||||
|
||||
|
||||
// 子菜单项悬停效果
|
||||
.el-sub-menu .el-menu-item:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
|
||||
// 主菜单项悬停效果
|
||||
.el-menu-item:hover,
|
||||
.el-sub-menu__title:hover {
|
||||
@ -399,28 +407,29 @@
|
||||
// 全局菜单样式匹配设计UI
|
||||
#app .sidebar-container {
|
||||
// 确保背景色一致
|
||||
background: #2c3e50 !important;
|
||||
|
||||
background: rgba(11, 24, 40, 1) !important;
|
||||
//background: #2c3e50 !important;
|
||||
|
||||
// 菜单项基础样式
|
||||
.el-menu-item,
|
||||
.el-sub-menu__title {
|
||||
color: #bfcbd9 !important;
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 激活的主菜单项
|
||||
.el-menu-item.is-active,
|
||||
.el-sub-menu.is-active > .el-sub-menu__title {
|
||||
.el-sub-menu.is-active>.el-sub-menu__title {
|
||||
background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
|
||||
color: #ffffff !important;
|
||||
border-radius: 4px;
|
||||
margin: 2px 8px;
|
||||
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
|
||||
// 激活的子菜单项
|
||||
.el-sub-menu .el-menu-item.is-active {
|
||||
background: transparent !important;
|
||||
@ -429,19 +438,19 @@
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
// 子菜单背景
|
||||
.el-sub-menu .el-menu {
|
||||
background: #1f2d3d !important;
|
||||
}
|
||||
|
||||
|
||||
// 图标颜色
|
||||
.svg-icon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
// 箭头图标颜色
|
||||
.el-sub-menu__icon-arrow {
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
// 全局SCSS变量
|
||||
:root {
|
||||
--menuBg: #2c3e50; // 精确匹配图片中的深色背景
|
||||
--menuBg: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15),rgba(0, 87, 159, 0) 100%);; // 精确匹配图片中的深色背景
|
||||
--menuColor: #bfcbd9; // 非激活菜单项的文字颜色
|
||||
--menuActiveText: #ffffff; // 激活菜单项的文字颜色
|
||||
--menuHover: #34495e; // 悬停时的背景色
|
||||
@ -11,7 +11,7 @@
|
||||
--subMenuTitleHover: #293444; // 子菜单标题悬停背景色
|
||||
|
||||
// 激活菜单项的渐变颜色 - 根据设计UI调整
|
||||
--menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
|
||||
--menuActiveGradient:linear-gradient(90.00deg, rgba(0, 128, 234, 1),rgba(0, 15, 39, 0) 100%);
|
||||
|
||||
--fixedHeaderBg: #ffffff;
|
||||
--tableHeaderBg: #f8f8f9;
|
||||
@ -130,7 +130,7 @@ $--color-warning: #e6a23c;
|
||||
$--color-danger: #f56c6c;
|
||||
$--color-info: #909399;
|
||||
|
||||
$base-sidebar-width: 280px;
|
||||
$base-sidebar-width: 250px;
|
||||
|
||||
// the :export directive is the magic sauce for webpack
|
||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||
|
||||
265
src/utils/mqtt.ts
Normal file
265
src/utils/mqtt.ts
Normal file
@ -0,0 +1,265 @@
|
||||
import { ref, onUnmounted } from 'vue'; // 修复：导入必要的Vue API
|
||||
import * as Paho from 'paho-mqtt';
|
||||
|
||||
// MQTT消息类型定义
|
||||
export interface MqttMessage {
|
||||
topic: string;
|
||||
payload: string | ArrayBuffer;
|
||||
qos: number;
|
||||
retained: boolean;
|
||||
time: Date;
|
||||
}
|
||||
|
||||
// 订阅选项
|
||||
export interface SubscribeOptions {
|
||||
qos: 0 | 1 | 2;
|
||||
}
|
||||
|
||||
// MQTT配置信息
|
||||
const MQTT_CONFIG = {
|
||||
// 连接地址（添加协议类型）
|
||||
protocol: 'ws', // 关键：明确协议（ws或wss）
|
||||
host: '47.120.79.150',
|
||||
port: 9083,
|
||||
// 认证信息
|
||||
username: 'admin',
|
||||
password: '#YtvpSfCNG',
|
||||
// 客户端ID（添加时间戳确保唯一性）
|
||||
clientId: `vue3-mqtt-client-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
|
||||
// 连接选项
|
||||
cleanSession: true,
|
||||
keepAliveInterval: 60,
|
||||
reconnect: true,
|
||||
};
|
||||
|
||||
// MQTT客户端组合式API
|
||||
export function useMqtt() {
|
||||
// 客户端实例
|
||||
let client: Paho.Client | null = null;
|
||||
|
||||
// 状态管理（修复：已导入ref）
|
||||
const connected = ref(false);
|
||||
const connecting = ref(false);
|
||||
const error = ref<Error | null>(null);
|
||||
const messages = ref<MqttMessage[]>([]);
|
||||
const subscribedTopics = ref<string[]>([]);
|
||||
|
||||
// 事件回调
|
||||
const connectCallbacks: (() => void)[] = [];
|
||||
const messageCallbacks: ((message: MqttMessage) => void)[] = [];
|
||||
const errorCallbacks: ((err: Error) => void)[] = [];
|
||||
const disconnectCallbacks: (() => void)[] = [];
|
||||
|
||||
// 修复：移除无用的p0参数，connect方法不接受回调（通过onConnect注册）
|
||||
const connect = () => {
|
||||
if (connected.value || connecting.value) return;
|
||||
connecting.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
// 创建客户端实例（添加协议参数）
|
||||
client = new Paho.Client(
|
||||
MQTT_CONFIG.host,
|
||||
MQTT_CONFIG.port,
|
||||
MQTT_CONFIG.clientId
|
||||
);
|
||||
|
||||
// 设置连接选项
|
||||
const connectOptions: Paho.ConnectOptions = {
|
||||
userName: MQTT_CONFIG.username,
|
||||
password: MQTT_CONFIG.password,
|
||||
cleanSession: MQTT_CONFIG.cleanSession,
|
||||
keepAliveInterval: MQTT_CONFIG.keepAliveInterval,
|
||||
reconnect: MQTT_CONFIG.reconnect,
|
||||
|
||||
// 连接成功回调
|
||||
onSuccess: () => {
|
||||
console.log('MQTT连接成功');
|
||||
connected.value = true;
|
||||
connecting.value = false;
|
||||
connectCallbacks.forEach(cb => cb()); // 触发所有连接成功回调
|
||||
},
|
||||
|
||||
// 连接失败回调
|
||||
onFailure: (err) => {
|
||||
console.error('MQTT连接失败:', err);
|
||||
error.value = new Error(err.errorMessage || '连接失败');
|
||||
connected.value = false;
|
||||
connecting.value = false;
|
||||
errorCallbacks.forEach(cb => cb(error.value!));
|
||||
}
|
||||
};
|
||||
|
||||
// 设置客户端回调
|
||||
client.onConnectionLost = (responseObject) => {
|
||||
if (responseObject.errorCode !== 0) {
|
||||
console.error('连接丢失:', responseObject.errorMessage);
|
||||
error.value = new Error(responseObject.errorMessage || '连接丢失');
|
||||
errorCallbacks.forEach(cb => cb(error.value!));
|
||||
}
|
||||
|
||||
connected.value = false;
|
||||
connecting.value = false;
|
||||
disconnectCallbacks.forEach(cb => cb());
|
||||
};
|
||||
|
||||
// 消息接收回调
|
||||
client.onMessageArrived = (message) => {
|
||||
const newMessage: MqttMessage = {
|
||||
topic: message.destinationName,
|
||||
payload: message.payloadString || message.payloadBytes,
|
||||
qos: message.qos,
|
||||
retained: message.retained,
|
||||
time: new Date()
|
||||
};
|
||||
|
||||
messages.value.push(newMessage);
|
||||
messageCallbacks.forEach(cb => cb(newMessage));
|
||||
};
|
||||
|
||||
// 连接服务器
|
||||
client.connect(connectOptions);
|
||||
} catch (err) {
|
||||
console.error('MQTT连接异常:', err);
|
||||
error.value = err as Error;
|
||||
connected.value = false;
|
||||
connecting.value = false;
|
||||
errorCallbacks.forEach(cb => cb(error.value!));
|
||||
}
|
||||
};
|
||||
|
||||
// 断开连接
|
||||
const disconnect = () => {
|
||||
if (!client || !connected.value) return;
|
||||
|
||||
client.disconnect();
|
||||
client = null;
|
||||
connected.value = false;
|
||||
subscribedTopics.value = [];
|
||||
disconnectCallbacks.forEach(cb => cb());
|
||||
};
|
||||
|
||||
// 订阅主题
|
||||
const subscribe = (topic: string, options: SubscribeOptions): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!client || !connected.value) {
|
||||
reject(new Error('未连接到MQTT服务器'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (subscribedTopics.value.includes(topic)) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
client.subscribe(topic, {
|
||||
qos: options.qos,
|
||||
onSuccess: () => {
|
||||
console.log(`订阅主题成功: ${topic}`);
|
||||
subscribedTopics.value.push(topic);
|
||||
resolve();
|
||||
},
|
||||
onFailure: (err) => {
|
||||
console.error(`订阅主题失败: ${topic}`, err);
|
||||
reject(new Error(err.errorMessage || `订阅主题 ${topic} 失败`));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 取消订阅
|
||||
const unsubscribe = (topic: string): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!client || !connected.value) {
|
||||
reject(new Error('未连接到MQTT服务器'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!subscribedTopics.value.includes(topic)) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
client.unsubscribe(topic, {
|
||||
onSuccess: () => {
|
||||
console.log(`取消订阅主题成功: ${topic}`);
|
||||
subscribedTopics.value = subscribedTopics.value.filter(t => t !== topic);
|
||||
resolve();
|
||||
},
|
||||
onFailure: (err) => {
|
||||
console.error(`取消订阅主题失败: ${topic}`, err);
|
||||
reject(new Error(err.errorMessage || `取消订阅主题 ${topic} 失败`));
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 发布消息
|
||||
const publish = (
|
||||
topic: string,
|
||||
payload: string | ArrayBuffer,
|
||||
options: { qos: 0 | 1 | 2; retained?: boolean }
|
||||
): Promise<void> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!client || !connected.value) {
|
||||
reject(new Error('未连接到MQTT服务器'));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!topic) {
|
||||
reject(new Error('主题不能为空'));
|
||||
return;
|
||||
}
|
||||
|
||||
const message = new Paho.Message(
|
||||
typeof payload === 'string' ? payload : payload.toString()
|
||||
);
|
||||
|
||||
message.destinationName = topic;
|
||||
message.qos = options.qos;
|
||||
message.retained = options.retained ?? false;
|
||||
|
||||
client.send(message);
|
||||
resolve();
|
||||
});
|
||||
};
|
||||
|
||||
// 事件注册
|
||||
const onConnect = (callback: () => void) => {
|
||||
connectCallbacks.push(callback);
|
||||
};
|
||||
|
||||
const onMessage = (callback: (message: MqttMessage) => void) => {
|
||||
messageCallbacks.push(callback);
|
||||
};
|
||||
|
||||
const onError = (callback: (err: Error) => void) => {
|
||||
errorCallbacks.push(callback);
|
||||
};
|
||||
|
||||
const onDisconnect = (callback: () => void) => {
|
||||
disconnectCallbacks.push(callback);
|
||||
};
|
||||
|
||||
// 组件卸载时断开连接
|
||||
onUnmounted(() => {
|
||||
disconnect();
|
||||
});
|
||||
|
||||
return {
|
||||
connected,
|
||||
connecting,
|
||||
error,
|
||||
messages,
|
||||
subscribedTopics,
|
||||
connect,
|
||||
disconnect,
|
||||
subscribe,
|
||||
unsubscribe,
|
||||
publish,
|
||||
onConnect,
|
||||
onMessage,
|
||||
onError,
|
||||
onDisconnect
|
||||
};
|
||||
}
|
||||
7
src/views/controlCenter/210/index.vue
Normal file
7
src/views/controlCenter/210/index.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<div class="device-page p-2">
|
||||
这是210控制页面
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -113,18 +113,32 @@
|
||||
<div class="message-content">
|
||||
<el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
|
||||
v-model="deviceDetail.sendMsg" resize="none" />
|
||||
<el-button type="primary" class="send-btn" @click="sendTextMessage"
|
||||
:loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
|
||||
sendTextLoading ? '发送中' : '发送' }}</el-button>
|
||||
<div style="text-align: end;clear: both;">
|
||||
<el-button type="primary" class="send-btn" @click="sendTextMessage"
|
||||
:loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
|
||||
sendTextLoading ? '发送中' : '发送' }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- ===========充电提示框====== -->
|
||||
<el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
|
||||
</div>
|
||||
<div>请及时充电</div>
|
||||
<span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
|
||||
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="DeviceControl" lang="ts">
|
||||
const route = useRoute();
|
||||
import { useMqtt } from '@/utils/mqtt';
|
||||
import api from '@/api/controlCenter/controlPanel/index'
|
||||
import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
|
||||
import { generateShortId, getDeviceStatus } from '@/utils/function';
|
||||
@ -147,7 +161,16 @@ const fullscreenLoading = ref(false)
|
||||
const forceAlarmLoading = ref(false) //强制报警
|
||||
const sendTextLoading = ref(false)
|
||||
const lightModesLoading = ref(false)
|
||||
|
||||
const centerDialogVisible = ref(false)
|
||||
const {
|
||||
connected,
|
||||
connect,
|
||||
subscribe,
|
||||
onConnect,
|
||||
onError,
|
||||
onMessage,
|
||||
disconnect
|
||||
} = useMqtt();
|
||||
// 灯光模式数据（引用导入的图片）
|
||||
const lightModes = ref<LightMode[]>([
|
||||
{
|
||||
@ -244,6 +267,7 @@ const handleModeClick = async (modeId: string) => {
|
||||
typeName: deviceDetail.value.typeName,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
setActiveLightMode(modeId);
|
||||
} else {
|
||||
@ -300,9 +324,12 @@ const getList = async () => {
|
||||
targetModeId = matchedMode.id;
|
||||
}
|
||||
setActiveLightMode(targetModeId);
|
||||
const laserStatus = res.data.laserModeStatus ?? 0;
|
||||
const laserStatus = Number(res.data.laserLightMode);
|
||||
laserMode.value.active = laserStatus === 1;
|
||||
laserMode.value.switchStatus = laserStatus === 1;
|
||||
setTimeout(() => {
|
||||
console.log('延迟检查激光状态:', laserMode.value.active, laserMode.value.switchStatus);
|
||||
}, 1000);
|
||||
} catch (error) {
|
||||
console.error("获取设备详情失败：", error);
|
||||
setActiveLightMode("strong"); // 异常时默认强光
|
||||
@ -321,6 +348,7 @@ const handleLaserClick = async () => {
|
||||
instructValue: targetStatus ? 1 : 0
|
||||
});
|
||||
if (res.code === 200) {
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
laserMode.value.active = targetStatus;
|
||||
laserMode.value.switchStatus = targetStatus;
|
||||
@ -496,9 +524,117 @@ const lookMap = (row: any) => {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
const getMainLightModeLabel = (mode: any) => {
|
||||
const modeMap = {
|
||||
0: 'close', // 0 → 关闭
|
||||
1: 'strong', // 1 → 强光
|
||||
2: 'weak', // 2 → 弱光
|
||||
3: 'strobe', // 3 → 爆闪
|
||||
4: 'flood' // 4 → 泛光
|
||||
}
|
||||
return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
|
||||
}
|
||||
// 处理设备消息
|
||||
const handleDeviceMessage = (msg: any) => {
|
||||
try {
|
||||
// 解析设备消息（假设格式为 { state: [类型, 模式值, 亮度, 续航...] }）
|
||||
const payloadObj = JSON.parse(msg.payload.toString());
|
||||
const deviceState = payloadObj.state; // 设备状态数组
|
||||
if (!Array.isArray(deviceState)) {
|
||||
return;
|
||||
}
|
||||
// 用switch处理不同的消息类型（deviceState[0]）
|
||||
switch (deviceState[0]) {
|
||||
case 1:
|
||||
// 类型1灯光主键
|
||||
const lightModeId = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
|
||||
const brightness = deviceState[2]; // 亮度值
|
||||
const batteryTime = deviceState[3]; // 续航时间
|
||||
console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
|
||||
// 1. 同步灯光模式状态
|
||||
if (lightModeId !== 'unknown') {
|
||||
lightModes.value.forEach(mode => {
|
||||
const isActive = mode.id === lightModeId;
|
||||
mode.active = isActive;
|
||||
mode.switchStatus = isActive;
|
||||
});
|
||||
}
|
||||
// 2.亮度
|
||||
if (brightness !== undefined) {
|
||||
deviceDetail.value.lightBrightness = brightness.toString();
|
||||
}
|
||||
// 3.续航时间
|
||||
if (batteryTime !== undefined) {
|
||||
deviceDetail.value.batteryRemainingTime = batteryTime.toString();
|
||||
}
|
||||
break;
|
||||
case 12:
|
||||
// 灯光主键
|
||||
const lightModeIdA = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
|
||||
if (lightModeIdA !== 'unknown') {
|
||||
lightModes.value.forEach(mode => {
|
||||
const isActive = mode.id === lightModeIdA;
|
||||
mode.active = isActive;
|
||||
mode.switchStatus = isActive;
|
||||
});
|
||||
}
|
||||
// 激光
|
||||
const laserValue = deviceState[2];
|
||||
// 同步激光模式状态：1=开启（true），0=关闭（false）
|
||||
laserMode.value.active = laserValue === 1;
|
||||
laserMode.value.switchStatus = laserValue === 1;
|
||||
deviceDetail.value.batteryPercentage = deviceState[3]; //电量
|
||||
deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
|
||||
// getList(); // 重新获取设备详情
|
||||
if (deviceDetail.value.batteryPercentage < 20 && deviceDetail.value.chargeState == 0) {
|
||||
centerDialogVisible.value=true
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// 其他类型消息（不处理，仅打印）
|
||||
console.log('未处理的消息类型:', deviceState[0]);
|
||||
break;
|
||||
}
|
||||
} catch (e) {
|
||||
}
|
||||
};
|
||||
onMounted(async () => {
|
||||
await getList(); // 先获取设备信息
|
||||
// 连接mqtt
|
||||
onConnect(async () => {
|
||||
const deviceImei = deviceDetail.value.deviceImei;
|
||||
if (!deviceImei) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await subscribe(`A/${deviceImei}`, { qos: 1 });
|
||||
console.log('订阅成功');
|
||||
} catch (err) {
|
||||
console.error('订阅失败（onConnect内）:', err);
|
||||
}
|
||||
});
|
||||
// 2. 注册消息接收回调（核心：处理设备发送的消息）
|
||||
onMessage((msg) => {
|
||||
console.log('收到新消息:', {
|
||||
主题: msg.topic,
|
||||
内容: msg.payload,
|
||||
时间: msg.time,
|
||||
QoS: msg.qos
|
||||
});
|
||||
// 在这里处理消息（根据实际业务逻辑）
|
||||
handleDeviceMessage(msg);
|
||||
});
|
||||
onError((err) => {
|
||||
console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
|
||||
});
|
||||
connect();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
// 只有当连接已建立时，才执行断开操作（避免无效调用）
|
||||
if (connected.value) {
|
||||
console.log('页面离开，断开MQTT连接');
|
||||
disconnect(); // 调用断开连接方法
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -537,7 +673,7 @@ onMounted(() => {
|
||||
background: white;
|
||||
padding: 0px 20px 50px;
|
||||
border: 1px solid #ebeef5;
|
||||
height: 100%;
|
||||
height: 289px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -720,9 +856,9 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// gap: 10px;
|
||||
|
||||
.el-textarea {
|
||||
border: 1px solid rgba(29, 111, 255, 1);
|
||||
@ -741,7 +877,9 @@ onMounted(() => {
|
||||
padding: 10px 20px;
|
||||
border-radius: 29px;
|
||||
background: rgba(2, 124, 251, 1);
|
||||
border: none
|
||||
border: none;
|
||||
margin: 20px 0px 30px 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -800,4 +938,9 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.path-img {
|
||||
width: 52px;
|
||||
height: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -45,8 +45,8 @@
|
||||
<el-form-item label="设备名称" prop="deviceName">
|
||||
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="deviceStatus">
|
||||
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
|
||||
<el-form-item label="设备状态" prop="onlineStatus">
|
||||
<el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
|
||||
<el-option label="在线" value="1"></el-option>
|
||||
<el-option label="离线" value="0"></el-option>
|
||||
</el-select>
|
||||
@ -192,7 +192,7 @@ const initData: PageData<'', deviceQuery> = {
|
||||
pageSize: 10,
|
||||
deviceId: '',
|
||||
deviceName: '',
|
||||
deviceStatus: '',
|
||||
onlineStatus: '',
|
||||
deviceMac: '',
|
||||
deviceImei: '',
|
||||
personnelBy: '',
|
||||
@ -299,12 +299,13 @@ const resetQuery = () => {
|
||||
};
|
||||
|
||||
|
||||
/** 设备控制跳转 */
|
||||
/** 设备控制跳转动态取detailPageUrl字段值，跳转 */
|
||||
const handleControl = (row: any) => {
|
||||
console.log(row,'row1111');
|
||||
|
||||
const deviceId = row.id;
|
||||
router.push('/controlCenter/6170/' + deviceId);
|
||||
const detailPageUrl = row.detailPageUrl;
|
||||
const basePath = detailPageUrl.replace(/\/index$/, '');
|
||||
const dynamicPath = `/${basePath}/${deviceId}`;
|
||||
router.push(dynamicPath); // 跳转路由
|
||||
};
|
||||
|
||||
/** 选择条数 */
|
||||
@ -356,12 +357,12 @@ const getDeptTree = async () => {
|
||||
const sendTextMessage = () => {
|
||||
// 防重复提交
|
||||
if (!queryParams.value.deviceType) {
|
||||
ElMessage.closeAll();
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgWarning('请先选择设备类型');
|
||||
return;
|
||||
}
|
||||
if (ids.value.length == 0) {
|
||||
ElMessage.closeAll();
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgWarning('请先选中一条设备');
|
||||
return;
|
||||
}
|
||||
@ -370,7 +371,7 @@ const sendTextMessage = () => {
|
||||
// 发送文本消息确认
|
||||
const submitForm = async () => {
|
||||
if (!form.value.messageToSend) {
|
||||
ElMessage.closeAll();
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgWarning('发送消息不能为空');
|
||||
return
|
||||
}
|
||||
@ -426,12 +427,12 @@ const cancel = () => {
|
||||
// 强制报警
|
||||
const forceAlarm = async () => {
|
||||
if (!queryParams.value.deviceType) {
|
||||
ElMessage.closeAll();
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgWarning('请先选择设备类型');
|
||||
return;
|
||||
}
|
||||
if (ids.value.length == 0) {
|
||||
ElMessage.closeAll();
|
||||
ElMessage.closeAll();
|
||||
proxy?.$modal.msgWarning('请先选中一条设备');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -15,11 +15,10 @@
|
||||
<el-card>
|
||||
<!-- =========搜索按钮操作======= -->
|
||||
<div class="btn_search">
|
||||
<el-button type="primary" plain icon="Download"
|
||||
@click="handleExport">导出</el-button>
|
||||
<el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
<div style="position: absolute; right:30px; top:20px">
|
||||
<el-input v-model="queryParams.content" placeholder="MAC/IMEI" clearable
|
||||
style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
|
||||
style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
|
||||
<el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -109,7 +108,7 @@ const initData: PageData<'', deviceQuery> = {
|
||||
deviceType: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
content:""
|
||||
content: ""
|
||||
},
|
||||
rules: undefined,
|
||||
form: ''
|
||||
|
||||
@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id" prop="userId">
|
||||
<el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" prop="orderNum">
|
||||
<el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="key键" prop="testKey">
|
||||
<el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['demo:demo:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column v-if="true" label="主键" align="center" prop="id" />
|
||||
<el-table-column label="部门id" align="center" prop="deptId" />
|
||||
<el-table-column label="用户id" align="center" prop="userId" />
|
||||
<el-table-column label="排序号" align="center" prop="orderNum" />
|
||||
<el-table-column label="key键" align="center" prop="testKey" />
|
||||
<el-table-column label="值" align="center" prop="value" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button v-hasPermi="['demo:demo:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button v-hasPermi="['demo:demo:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
|
||||
</el-card>
|
||||
<!-- 添加或修改测试单对话框 -->
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id" prop="userId">
|
||||
<el-input v-model="form.userId" placeholder="请输入用户id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序号" prop="orderNum">
|
||||
<el-input v-model="form.orderNum" placeholder="请输入排序号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="key键" prop="testKey">
|
||||
<el-input v-model="form.testKey" placeholder="请输入key键" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="value">
|
||||
<el-input v-model="form.value" placeholder="请输入值" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Demo" lang="ts">
|
||||
import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
|
||||
import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const demoList = ref<DemoVO[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref<Array<string | number>>([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const demoFormRef = ref<ElFormInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: DemoForm = {
|
||||
id: undefined,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
orderNum: undefined,
|
||||
testKey: undefined,
|
||||
value: undefined
|
||||
};
|
||||
const data = reactive<PageData<DemoForm, DemoQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
orderNum: undefined,
|
||||
testKey: undefined,
|
||||
value: undefined
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
|
||||
orderNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
|
||||
testKey: [{ required: true, message: 'key键不能为空', trigger: 'blur' }],
|
||||
value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询测试单列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listDemo(queryParams.value);
|
||||
demoList.value = res.rows;
|
||||
total.value = res.total;
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
/** 取消按钮 */
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
/** 表单重置 */
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
demoFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 多选框选中数据 */
|
||||
const handleSelectionChange = (selection: DemoVO[]) => {
|
||||
ids.value = selection.map((item) => item.id);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加测试单';
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row?: DemoVO) => {
|
||||
reset();
|
||||
const _id = row?.id || ids.value[0];
|
||||
const res = await getDemo(_id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改测试单';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
demoFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateDemo(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addDemo(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('修改成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: DemoVO) => {
|
||||
const _ids = row?.id || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
|
||||
await delDemo(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
};
|
||||
|
||||
/** 导出按钮操作 */
|
||||
const handleExport = () => {
|
||||
proxy?.download(
|
||||
'demo/demo/export',
|
||||
{
|
||||
...queryParams.value
|
||||
},
|
||||
`demo_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
@ -1,259 +0,0 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div v-show="showSearch" class="mb-[10px]">
|
||||
<el-card shadow="hover">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="树节点名" prop="treeName">
|
||||
<el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
|
||||
</el-col>
|
||||
<right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
|
||||
</el-row>
|
||||
</template>
|
||||
<el-table
|
||||
ref="treeTableRef"
|
||||
v-loading="loading"
|
||||
:data="treeList"
|
||||
row-key="id"
|
||||
border
|
||||
:default-expand-all="isExpandAll"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="父id" align="center" prop="parentId" />
|
||||
<el-table-column label="部门id" align="center" prop="deptId" />
|
||||
<el-table-column label="用户id" align="center" prop="userId" />
|
||||
<el-table-column label="树节点名" align="center" prop="treeName" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip content="修改" placement="top">
|
||||
<el-button v-hasPermi="['demo:tree:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="新增" placement="top">
|
||||
<el-button v-hasPermi="['demo:tree:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
|
||||
</el-tooltip>
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-button v-hasPermi="['demo:tree:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<!-- 添加或修改测试树对话框 -->
|
||||
<el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
|
||||
<el-form ref="treeFormRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="父id" prop="parentId">
|
||||
<el-tree-select
|
||||
v-model="form.parentId"
|
||||
:data="treeOptions"
|
||||
:props="{ value: 'id', label: 'treeName', children: 'children' } as any"
|
||||
value-key="id"
|
||||
placeholder="请选择父id"
|
||||
check-strictly
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门id" prop="deptId">
|
||||
<el-input v-model="form.deptId" placeholder="请输入部门id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="用户id" prop="userId">
|
||||
<el-input v-model="form.userId" placeholder="请输入用户id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="值" prop="treeName">
|
||||
<el-input v-model="form.treeName" placeholder="请输入值" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Tree" lang="ts">
|
||||
import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
|
||||
import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
|
||||
|
||||
type TreeOption = {
|
||||
id: number;
|
||||
treeName: string;
|
||||
children?: TreeOption[];
|
||||
};
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
const treeList = ref<TreeVO[]>([]);
|
||||
const treeOptions = ref<TreeOption[]>([]);
|
||||
const buttonLoading = ref(false);
|
||||
const showSearch = ref(true);
|
||||
const isExpandAll = ref(true);
|
||||
const loading = ref(false);
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const treeFormRef = ref<ElFormInstance>();
|
||||
const treeTableRef = ref<ElTableInstance>();
|
||||
|
||||
const dialog = reactive<DialogOption>({
|
||||
visible: false,
|
||||
title: ''
|
||||
});
|
||||
|
||||
const initFormData: TreeForm = {
|
||||
id: undefined,
|
||||
parentId: undefined,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
treeName: undefined
|
||||
};
|
||||
|
||||
const data = reactive<PageData<TreeForm, TreeQuery>>({
|
||||
form: { ...initFormData },
|
||||
queryParams: {
|
||||
parentId: undefined,
|
||||
deptId: undefined,
|
||||
userId: undefined,
|
||||
treeName: undefined
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
|
||||
parentId: [{ required: true, message: '父id不能为空', trigger: 'blur' }],
|
||||
deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
|
||||
userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
|
||||
treeName: [{ required: true, message: '值不能为空', trigger: 'blur' }]
|
||||
}
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询测试树列表 */
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const res = await listTree(queryParams.value);
|
||||
const data = proxy?.handleTree<TreeVO>(res.data, 'id', 'parentId');
|
||||
if (data) {
|
||||
treeList.value = data;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 查询测试树下拉树结构 */
|
||||
const getTreeselect = async () => {
|
||||
const res = await listTree();
|
||||
treeOptions.value = [];
|
||||
const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] };
|
||||
data.children = proxy?.handleTree<TreeOption>(res.data, 'id', 'parentId');
|
||||
treeOptions.value.push(data);
|
||||
};
|
||||
|
||||
// 取消按钮
|
||||
const cancel = () => {
|
||||
reset();
|
||||
dialog.visible = false;
|
||||
};
|
||||
|
||||
// 表单重置
|
||||
const reset = () => {
|
||||
form.value = { ...initFormData };
|
||||
treeFormRef.value?.resetFields();
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
const handleQuery = () => {
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
const handleAdd = (row?: TreeVO) => {
|
||||
reset();
|
||||
getTreeselect();
|
||||
if (row && row.id) {
|
||||
form.value.parentId = row.id;
|
||||
} else {
|
||||
form.value.parentId = 0;
|
||||
}
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加测试树';
|
||||
};
|
||||
|
||||
/** 展开/折叠操作 */
|
||||
const handleToggleExpandAll = () => {
|
||||
isExpandAll.value = !isExpandAll.value;
|
||||
toggleExpandAll(treeList.value, isExpandAll.value);
|
||||
};
|
||||
|
||||
/** 展开/折叠操作 */
|
||||
const toggleExpandAll = (data: TreeVO[], status: boolean) => {
|
||||
data.forEach((item) => {
|
||||
treeTableRef.value?.toggleRowExpansion(item, status);
|
||||
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
|
||||
});
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
const handleUpdate = async (row: TreeVO) => {
|
||||
reset();
|
||||
await getTreeselect();
|
||||
if (row) {
|
||||
form.value.parentId = row.id;
|
||||
}
|
||||
const res = await getTree(row.id);
|
||||
Object.assign(form.value, res.data);
|
||||
dialog.visible = true;
|
||||
dialog.title = '修改测试树';
|
||||
};
|
||||
|
||||
/** 提交按钮 */
|
||||
const submitForm = () => {
|
||||
treeFormRef.value?.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
buttonLoading.value = true;
|
||||
if (form.value.id) {
|
||||
await updateTree(form.value).finally(() => (buttonLoading.value = false));
|
||||
} else {
|
||||
await addTree(form.value).finally(() => (buttonLoading.value = false));
|
||||
}
|
||||
proxy?.$modal.msgSuccess('操作成功');
|
||||
dialog.visible = false;
|
||||
await getList();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row: TreeVO) => {
|
||||
await proxy?.$modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
|
||||
loading.value = true;
|
||||
await delTree(row.id).finally(() => (loading.value = false));
|
||||
await getList();
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user