forked from dyf/dyf-vue-ui
设备控制提交
This commit is contained in:
fengerli
@ -2,11 +2,15 @@
|
||||
<div class="device-page p-2">
|
||||
<!-- 头部信息栏 -->
|
||||
<div class="header-bar">
|
||||
<div>设备名称：6170零零一</div>
|
||||
<div>设备型号：BJQ6170</div>
|
||||
<div class="device-status">设备状态：<span class="online">在线</span></div>
|
||||
<div>电量：80%</div>
|
||||
<div>续航：1小时55分钟</div>
|
||||
<div>设备名称：{{ deviceDetail.deviceName }}</div>
|
||||
<div>设备型号：{{ deviceDetail.deviceImei }}</div>
|
||||
<div class="device-status">设备状态：
|
||||
<span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
|
||||
{{ deviceDetail.onlineStatus === 1 ? "在线" : "离线" }}
|
||||
</span>
|
||||
</div>
|
||||
<div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
|
||||
<div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容区域 -->
|
||||
@ -18,13 +22,20 @@
|
||||
<h4 class="section-title">灯光模式</h4>
|
||||
<div class="light-mode">
|
||||
<!-- 使用v-for循环渲染灯光模式卡片 -->
|
||||
<div class="mode-card" :class="{ 'active': mode.active }" @click="handleModeClick(mode.id)"
|
||||
v-for="mode in lightModes" :key="mode.id">
|
||||
<div class="mode-card" :class="{ 'active': mode.active }"
|
||||
@click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
|
||||
<img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
|
||||
class="mode-icon" />
|
||||
<div class="mode-name">{{ mode.name }}</div>
|
||||
<el-switch v-model="mode.switchStatus" />
|
||||
</div>
|
||||
<!-- 激光模式（单独处理） -->
|
||||
<div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
|
||||
<img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon"
|
||||
:alt="laserMode.name" class="mode-icon" />
|
||||
<div class="mode-name">{{ laserMode.name }}</div>
|
||||
<el-switch v-model="laserMode.switchStatus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -32,23 +43,26 @@
|
||||
<div class="brightness-alarm">
|
||||
<div class="brightness-control">
|
||||
<span class="brightness-label">灯光亮度</span>
|
||||
<el-input class="inputTFT" v-model="brightness" :min="0" :max="100" :step="1"
|
||||
size="small" />
|
||||
<el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100"
|
||||
:step="1" size="small" />
|
||||
<span class="brightness-value">%</span>
|
||||
<el-button type="primary" class="save-btn">保存</el-button>
|
||||
<el-button type="primary" class="save-btn" @click="saveBtn">保存</el-button>
|
||||
</div>
|
||||
<el-button type="danger" class="alarm-btn">强制报警</el-button>
|
||||
<el-button type="danger" class="alarm-btn" @click="forceAlarm">强制报警</el-button>
|
||||
</div>
|
||||
<div class="content-card_gps">
|
||||
<h4 class="section-title">位置信息</h4>
|
||||
<div class="location-info">
|
||||
<div class="location-item">
|
||||
<span class="location-icon"></span>
|
||||
<span>经纬度 114°7'E 30°28'N</span>
|
||||
<span>经纬度 {{ deviceDetail && deviceDetail.longitude ?
|
||||
Number(deviceDetail.longitude).toFixed(4) : '无' }}
|
||||
{{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
|
||||
: '无' }} </span>
|
||||
</div>
|
||||
<div class="location-item">
|
||||
|
||||
<div>地址 <span class="lacatin_gps">ksjkjwekrnjewrnjewrnjwerjweb</span></div>
|
||||
|
||||
<div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
|
||||
<el-button link type="primary" class="view-btn">查看</el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,21 +78,25 @@
|
||||
<div class="form-grid">
|
||||
<div class="form-item">
|
||||
<span class="form-label">单位:</span>
|
||||
<el-input placeholder="请输入设备名称" />
|
||||
<el-input v-if="deviceDetail" placeholder="请输入单位名称"
|
||||
v-model="deviceDetail.personnelInfo.unitName" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">职位:</span>
|
||||
<el-input placeholder="请输入设备名称" />
|
||||
<el-input v-if="deviceDetail" placeholder="请输入职位名称"
|
||||
v-model="deviceDetail.personnelInfo.position" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">姓名</span>
|
||||
<el-input value="王平安" />
|
||||
<el-input v-if="deviceDetail" placeholder="请输入职位姓名"
|
||||
v-model="deviceDetail.personnelInfo.name" />
|
||||
</div>
|
||||
<div class="form-item">
|
||||
<span class="form-label">ID:</span>
|
||||
<el-input placeholder="请输入设备名称" />
|
||||
<el-input v-if="deviceDetail" placeholder="请输入ID"
|
||||
v-model="deviceDetail.personnelInfo.code" />
|
||||
</div>
|
||||
<el-button type="primary" class="register-btn">登记</el-button>
|
||||
<el-button type="primary" class="register-btn" @click="registerPostInit">登记</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -86,9 +104,9 @@
|
||||
<div class="content-card">
|
||||
<h4 class="section-title">发送信息</h4>
|
||||
<div class="message-content">
|
||||
<el-input type="textarea" class="textareaTFT" :rows="4" value="现场危险，停止救援！紧急撤离至安全区域！"
|
||||
resize="none" />
|
||||
<el-button type="primary" class="send-btn">发送</el-button>
|
||||
<el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
|
||||
v-model="deviceDetail.sendMsg" resize="none" />
|
||||
<el-button type="primary" class="send-btn" @click="send">发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
@ -97,18 +115,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="DeviceControl" lang="ts">
|
||||
import { ref } from 'vue';
|
||||
|
||||
const brightness = ref(50);
|
||||
// 定义灯光模式的类型接口
|
||||
interface LightMode {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
activeIcon: string;
|
||||
active: boolean;
|
||||
switchStatus: boolean;
|
||||
}
|
||||
const route = useRoute();
|
||||
import api from '@/api/controlCenter/controlPanel/index'
|
||||
import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
|
||||
import { generateShortId, getDeviceStatus } from '@/utils/function';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
// 导入图片资源（确保路径正确）
|
||||
import strongLightDefault from '@/assets/images/strong-light.png';
|
||||
import strongLightActive from '@/assets/images/strong-light_HL.png';
|
||||
@ -120,8 +131,9 @@ import floodLightDefault from '@/assets/images/flood-light.png';
|
||||
import floodLightActive from '@/assets/images/flood-light_HL.png';
|
||||
import laserLightDefault from '@/assets/images/laser-light.png';
|
||||
import laserLightActive from '@/assets/images/laser-light_HL.png';
|
||||
|
||||
// 灯光模式数据
|
||||
import closeDefault from '@/assets/images/close.png';
|
||||
import closeActive from '@/assets/images/close_HL.png';
|
||||
import { send } from 'vite';
|
||||
// 灯光模式数据（引用导入的图片）
|
||||
const lightModes = ref<LightMode[]>([
|
||||
{
|
||||
@ -129,71 +141,269 @@ const lightModes = ref<LightMode[]>([
|
||||
name: '强光',
|
||||
icon: strongLightDefault, // 直接使用导入的变量
|
||||
activeIcon: strongLightActive,
|
||||
switchStatus: true,
|
||||
instructValue: '1',
|
||||
active: true,
|
||||
switchStatus: true
|
||||
},
|
||||
{
|
||||
id: 'weak',
|
||||
name: '弱光',
|
||||
icon: weakLightDefault,
|
||||
activeIcon: weakLightActive,
|
||||
switchStatus: false,
|
||||
instructValue: '2',
|
||||
active: false,
|
||||
switchStatus: false
|
||||
},
|
||||
{
|
||||
id: 'strobe',
|
||||
name: '爆闪',
|
||||
icon: strobeLightDefault,
|
||||
activeIcon: strobeLightActive,
|
||||
active: false,
|
||||
switchStatus: false
|
||||
switchStatus: false,
|
||||
instructValue: '3',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'flood',
|
||||
name: '泛光',
|
||||
icon: floodLightDefault,
|
||||
activeIcon: floodLightActive,
|
||||
active: false,
|
||||
switchStatus: false
|
||||
switchStatus: false,
|
||||
instructValue: '4',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
id: 'laser',
|
||||
name: '激光',
|
||||
icon: laserLightDefault,
|
||||
activeIcon: laserLightActive,
|
||||
active: false,
|
||||
switchStatus: false
|
||||
}
|
||||
id: 'close',
|
||||
name: '关闭',
|
||||
icon: closeDefault,
|
||||
activeIcon: closeActive,
|
||||
switchStatus: false,
|
||||
instructValue: '0',
|
||||
active: false
|
||||
},
|
||||
]);
|
||||
// 当前选中的模式
|
||||
const currentMode = computed(() => {
|
||||
return lightModes.value.find(mode => mode.active);
|
||||
const laserMode = ref<LightMode>({
|
||||
id: 'laser',
|
||||
name: '激光',
|
||||
icon: laserLightDefault,
|
||||
activeIcon: laserLightActive,
|
||||
switchStatus: false,
|
||||
instructValue: '1',
|
||||
active: false
|
||||
});
|
||||
// 处理模式点击事件
|
||||
const handleModeClick = (modeId: string) => {
|
||||
// 重置所有模式状态
|
||||
lightModes.value.forEach(mode => {
|
||||
const isTargetMode = mode.id === modeId;
|
||||
mode.active = isTargetMode;
|
||||
mode.switchStatus = isTargetMode;
|
||||
});
|
||||
|
||||
// 可以在这里添加模式切换的业务逻辑
|
||||
console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
|
||||
};
|
||||
|
||||
// 监听开关状态变化
|
||||
lightModes.value.forEach(mode => {
|
||||
watch(() => mode.switchStatus, (newVal) => {
|
||||
if (newVal) {
|
||||
// 如果打开当前开关，关闭其他所有开关
|
||||
handleModeClick(mode.id);
|
||||
const deviceDetail = ref<DeviceDetail>({
|
||||
// 重点：personnelInfo 初始化为空对象，避免 undefined
|
||||
personnelInfo: {
|
||||
unitName: '',
|
||||
position: '',
|
||||
name: '',
|
||||
code: ''
|
||||
},
|
||||
lightBrightness: '',
|
||||
deviceName: '',
|
||||
deviceImei: '',
|
||||
onlineStatus: 0,
|
||||
batteryPercentage: 0,
|
||||
batteryRemainingTime: '',
|
||||
longitude: '',
|
||||
latitude: '',
|
||||
address: '',
|
||||
sendMsg: ''
|
||||
});
|
||||
// 保留原有的操作中标志位
|
||||
const isUpdatingStatus = ref(false);
|
||||
const handleModeClick = async (modeId: string) => {
|
||||
if (isUpdatingStatus.value || isSyncingStatus.value) return;
|
||||
try {
|
||||
const deviceId = route.params.deviceId as string;
|
||||
if (!deviceId) return;
|
||||
const targetMode = lightModes.value.find(m => m.id === modeId);
|
||||
if (!targetMode || !targetMode.instructValue) return;
|
||||
// 标记为用户操作中的更新
|
||||
isUpdatingStatus.value = true;
|
||||
// 调用接口（仅用户点击时触发一次）
|
||||
const res = await api.lightModeSettings({
|
||||
deviceId,
|
||||
instructValue: targetMode.instructValue,
|
||||
deviceImei: deviceDetail.value.deviceImei,
|
||||
typeName: deviceDetail.value.typeName,
|
||||
});
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
setActiveLightMode(modeId);
|
||||
await getList();
|
||||
} else {
|
||||
// 如果关闭当前开关
|
||||
mode.active = false;
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
const prevActiveMode = lightModes.value.find(m => m.active);
|
||||
if (prevActiveMode) {
|
||||
setActiveLightMode(prevActiveMode.id);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
proxy?.$modal.msgError("操作失败，请稍后重试");
|
||||
// 异常时恢复状态
|
||||
const prevActiveMode = lightModes.value.find(m => m.active);
|
||||
if (prevActiveMode) {
|
||||
setActiveLightMode(prevActiveMode.id);
|
||||
}
|
||||
} finally {
|
||||
// 无论成功失败，最终重置用户操作标志位
|
||||
isUpdatingStatus.value = false;
|
||||
}
|
||||
};
|
||||
const isSyncingStatus = ref(false);
|
||||
const setActiveLightMode = (targetModeId: string) => {
|
||||
isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
|
||||
lightModes.value.forEach(mode => {
|
||||
const isActive = mode.id === targetModeId;
|
||||
mode.active = isActive;
|
||||
mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
|
||||
});
|
||||
isSyncingStatus.value = false; // 同步完成，重置标志位
|
||||
};
|
||||
const getList = async () => {
|
||||
try {
|
||||
const deviceId = route.params.deviceId;
|
||||
if (!deviceId) return;
|
||||
const res = await api.deviceDeatil(deviceId as string);
|
||||
deviceDetail.value = res.data;
|
||||
// 处理人员信息空值（原有逻辑保留）
|
||||
if (!deviceDetail.value.personnelInfo) {
|
||||
deviceDetail.value.personnelInfo = {
|
||||
unitName: '',
|
||||
position: '',
|
||||
name: '',
|
||||
code: ''
|
||||
};
|
||||
}
|
||||
// 1. 匹配接口返回的灯光模式
|
||||
let targetModeId = "strong";
|
||||
const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
|
||||
const matchedMode = lightModes.value.find(
|
||||
mode => mode.instructValue === mainLightMode
|
||||
);
|
||||
if (matchedMode) {
|
||||
targetModeId = matchedMode.id;
|
||||
}
|
||||
setActiveLightMode(targetModeId);
|
||||
const laserStatus = res.data.laserModeStatus ?? 0;
|
||||
laserMode.value.active = laserStatus === 1;
|
||||
laserMode.value.switchStatus = laserStatus === 1;
|
||||
} catch (error) {
|
||||
console.error("获取设备详情失败：", error);
|
||||
setActiveLightMode("strong"); // 异常时默认强光
|
||||
}
|
||||
};
|
||||
// 激光接口调用
|
||||
const handleLaserClick = async () => {
|
||||
try {
|
||||
const deviceId = route.params.deviceId as string;
|
||||
if (!deviceId) return;
|
||||
const targetStatus = !laserMode.value.active;
|
||||
const res = await api.laserModeSettings({
|
||||
deviceId,
|
||||
deviceImei: deviceDetail.value.deviceImei,
|
||||
typeName: deviceDetail.value.typeName,
|
||||
instructValue: targetStatus ? 1 : 0
|
||||
});
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
laserMode.value.active = targetStatus;
|
||||
laserMode.value.switchStatus = targetStatus;
|
||||
getList();
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
// 恢复之前的状态
|
||||
laserMode.value.switchStatus = !targetStatus;
|
||||
}
|
||||
} catch (error: any) {
|
||||
proxy?.$modal.msgError(error.msg);
|
||||
// 恢复之前的状态
|
||||
laserMode.value.switchStatus = !laserMode.value.switchStatus;
|
||||
} finally { }
|
||||
}
|
||||
|
||||
// 人员信息发送
|
||||
const registerPostInit = () => {
|
||||
if (!deviceDetail.value.personnelInfo.unitName) {
|
||||
proxy?.$modal.msgWarning('单位名称不能为空');
|
||||
return
|
||||
}
|
||||
if (!deviceDetail.value.personnelInfo.name) {
|
||||
proxy?.$modal.msgWarning('姓名不能为空');
|
||||
return
|
||||
}
|
||||
if (!deviceDetail.value.personnelInfo.position) {
|
||||
proxy?.$modal.msgWarning('职位不能为空');
|
||||
return
|
||||
}
|
||||
if (!deviceDetail.value.personnelInfo.code) {
|
||||
proxy?.$modal.msgWarning('ID不能为空');
|
||||
return
|
||||
}
|
||||
let data = {
|
||||
code: deviceDetail.value.personnelInfo.code,
|
||||
name: deviceDetail.value.personnelInfo.name,
|
||||
position: deviceDetail.value.personnelInfo.position,
|
||||
unitName: deviceDetail.value.personnelInfo.unitName,
|
||||
deviceId: route.params.deviceId,
|
||||
deviceImei: deviceDetail.value.deviceImei
|
||||
}
|
||||
api.registerPersonInfo(data).then((res) => {
|
||||
console.log(res, 'res');
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 灯光亮度
|
||||
const saveBtn = () => {
|
||||
let data = {
|
||||
deviceId: route.params.deviceId,
|
||||
instructValue: deviceDetail.value.lightBrightness + '.00',
|
||||
deviceImei: deviceDetail.value.deviceImei,
|
||||
}
|
||||
api.lightBrightnessSettings(data).then((res) => {
|
||||
if (res.code === 200) {
|
||||
proxy?.$modal.msgSuccess(res.msg);
|
||||
getList();
|
||||
} else {
|
||||
proxy?.$modal.msgError(res.msg);
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
// 强制报警
|
||||
const forceAlarm = async () => {
|
||||
try {
|
||||
// 2. 准备请求数据
|
||||
const batchId = generateShortId();
|
||||
let data = {
|
||||
deviceIds: [route.params.deviceId],
|
||||
typeName: deviceDetail.value.typeName,
|
||||
deviceImeiList: [deviceDetail.value.deviceImei],
|
||||
batchId: batchId,
|
||||
instructValue: '1', //强制报警1，解除报警0
|
||||
}
|
||||
const registerRes = await api.sendAlarmMessage(data);
|
||||
if (registerRes.code == 200) {
|
||||
proxy?.$modal.msgSuccess(registerRes.msg);
|
||||
}
|
||||
|
||||
} catch (error:any) {
|
||||
proxy?.$modal.msgError(error.msg);
|
||||
|
||||
} finally {}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.device-page {
|
||||
@ -252,14 +462,15 @@ lightModes.value.forEach(mode => {
|
||||
|
||||
justify-content: space-between;
|
||||
}
|
||||
.lacatin_gps {
|
||||
height: 70px;
|
||||
border-radius: 4px;
|
||||
background: rgba(247, 248, 252, 1);
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.lacatin_gps {
|
||||
height: 70px;
|
||||
border-radius: 4px;
|
||||
background: rgba(247, 248, 252, 1);
|
||||
display: inline-block;
|
||||
width: 400px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.mode-card {
|
||||
display: flex;
|
||||
@ -282,6 +493,7 @@ lightModes.value.forEach(mode => {
|
||||
margin-bottom: 10px;
|
||||
transition: all 0.3s ease;
|
||||
object-fit: scale-down;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.mode-name {
|
||||
@ -295,7 +507,7 @@ lightModes.value.forEach(mode => {
|
||||
--el-switch-off-color: #dcdfe6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.brightness-alarm {
|
||||
|
||||
Reference in New Issue
Block a user