dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

100j控制面板功能完成

Browse Source
This commit is contained in:
fengerli
2026-03-18 16:12:29 +08:00
parent 7d604dcd53
commit 8584cc78b2
3 changed files with 328 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

458
src/views/controlCenter/100J/index.vue
View File

@ -15,17 +15,9 @@
<!-- 主体内容区域 -->
<div class="content-wrapper">
<el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'">
<el-col :lg="24" :xs="24">
<div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'"
@click="showClose()">
设备强制报警中!
</div>
</el-col>
</el-row>
<!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
<el-row :gutter="20" class="content-row">
<el-col :lg="8" :xs="24">
<el-col :lg="9" :xs="24">
<div class="content-card">
<h4 class="section-title">报警模式</h4>
<div class="light-mode">
@ -43,7 +35,7 @@
</div>
</div>
</el-col>
<el-col :lg="8" :xs="24">
<el-col :lg="9" :xs="24">
<div class="content-card1">
<h4 class="section-title">警示灯爆闪</h4>
<div class="light-mode">
@ -68,11 +60,15 @@
<div class="voice-select">
<el-select v-model="currentVoiceId" placeholder="请选择语音" style="width: 100%;">
<el-option v-for="item in voiceList" :key="item.id" :label="item.fileNameExt"
:value="item.id">
:value="item.id" ite>
</el-option>
</el-select>
</div>
<el-button type="primary" class="play-btn" @click="playCurrentVoice">播放</el-button>
<el-button type="primary" class="play-btn" @click="playCurrentVoice(1)"
v-if="deviceDetail.voiceBroadcast !== 1">
播放</el-button>
<el-button v-else type="info" class="play-btn" @click="playCurrentVoice(0)"> 暂停
</el-button>
</div>
<div class="voice-manage-section">
<span class="voice-label">语音管理</span>
@ -106,14 +102,12 @@
</div>
</div>
</el-col>
<el-col :lg="8" :xs="24">
<el-col :lg="6" :xs="24">
<div class="brightness-alarm alarm-btn-wrapper">
<el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading"
v-if="deviceDetail.voiceStrobeAlarm === 0 || deviceDetail.voiceStrobeAlarm === null"
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
<el-button type="default" class="alarm-btn cancel" @click="showClose"
v-if="deviceDetail.voiceStrobeAlarm === 1">解除</el-button>
:loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{ deviceDetail.voiceStrobeAlarm ===
1 ? '报警中' : '强制报警' }}</el-button>
<el-button type="default" class="alarm-btn cancel" @click="showClose">解除报警</el-button>
</div>
<div class="content-card_gps">
<h4 class="section-title">位置信息</h4>
@ -123,7 +117,7 @@
<span>经纬度 {{ deviceDetail && deviceDetail.longitude ?
Number(deviceDetail.longitude).toFixed(4) : '无' }}
{{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
: '无' }} </span>
: '无' }} </span>
</div>
<div class="location-item">
<div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
@ -177,7 +171,8 @@
<!-- 波形图 -->
<div class="waveform-container">
<div class="waveform" v-if="isRecording">
<span v-for="i in 30" :key="i" class="wave-bar" :style="{ height: `${Math.random() * 40 + 10}px` }"></span>
<span v-for="i in 30" :key="i" class="wave-bar"
:style="{ height: `${Math.random() * 40 + 10}px` }"></span>
</div>
<div class="waveform-placeholder" v-else>
<span class="wave-placeholder"></span>
@ -186,22 +181,29 @@
<!-- 录制控制区 -->
<div class="record-control">
<div class="mic-icon" :class="{ recording: isRecording }">
<el-icon><Microphone /></el-icon>
<el-icon>
<Microphone />
</el-icon>
</div>
<div class="record-time">{{ formatTime(recordDuration) }}</div>
<div class="record-play-btn">
<el-button v-if="isRecording" type="danger" circle @click="stopRecordVoice">
<el-icon><Pause /></el-icon>
<el-icon>
<!-- <Pause /> -->
</el-icon>
</el-button>
<el-button v-else type="primary" circle @click="startRecordVoice">
<el-icon><VideoPlay /></el-icon>
<el-icon>
<VideoPlay />
</el-icon>
</el-button>
</div>
</div>
<!-- 底部操作 -->
<div class="record-footer">
<el-button link type="primary" @click="resetRecord" :disabled="isRecording">重新录制</el-button>
<el-button type="primary" class="record-confirm" @click="saveRecordVoice" :disabled="!recordedBlob">完成</el-button>
<el-button type="primary" class="record-confirm" @click="saveRecordVoice"
:disabled="!recordedBlob">完成</el-button>
</div>
</div>
</el-dialog>
@ -209,13 +211,12 @@
<!-- 上传语音弹窗 -->
<el-dialog title="上传语音" v-model="uploadVoiceDialog" width="480px" class="voice-dialog" :show-close="true">
<div class="upload-content">
<div class="upload-area" :class="{ dragOver: isDragOver }"
@dragover.prevent="isDragOver = true"
@dragleave.prevent="isDragOver = false"
@drop.prevent="handleDrop"
@click="triggerFileInput">
<div class="upload-area" :class="{ dragOver: isDragOver }" @dragover.prevent="isDragOver = true"
@dragleave.prevent="isDragOver = false" @drop.prevent="handleDrop" @click="triggerFileInput">
<div class="upload-icon">
<el-icon><Document /></el-icon>
<el-icon>
<Document />
</el-icon>
</div>
<el-button type="primary" class="select-file-btn" @click="triggerFileInput">选择文件</el-button>
<div class="upload-tip">将文件拖拽至此区域</div>
@ -224,7 +225,8 @@
<span class="file-size">{{ (uploadFile.size / 1024).toFixed(2) }} KB</span>
</div>
</div>
<input ref="uploadFileInput" type="file" accept="audio/*" style="display: none" @change="handleFileUpload" />
<input ref="uploadFileInput" type="file" accept="audio/*" style="display: none"
@change="handleFileUpload" />
</div>
<template #footer>
<el-button @click="uploadVoiceDialog = false">取消</el-button>
@ -235,20 +237,23 @@
<!-- 文字转语音弹窗 -->
<el-dialog title="文字转语音" v-model="textToVoiceDialog" width="520px" class="voice-dialog" :show-close="true">
<div class="tts-content">
<el-input v-model="textToVoiceForm.content" type="textarea" rows="4" placeholder="请输入要转换的文字内容" class="tts-textarea"></el-input>
<el-input v-model="textToVoiceForm.content" type="textarea" rows="4" placeholder="请输入要转换的文字内容"
class="tts-textarea"></el-input>
<div class="tts-actions">
<el-button link type="primary" @click="handleUploadText">上传文本</el-button>
<!-- <el-button link type="primary" @click="handleUploadText">上传文本</el-button> -->
<el-button type="primary" @click="convertTextToVoice" :loading="ttsLoading">开始转换</el-button>
</div>
<!-- 转换后预览 -->
<div class="tts-preview" v-if="ttsResultUrl">
<div class="waveform-container">
<div class="waveform">
<span v-for="i in 30" :key="i" class="wave-bar" :style="{ height: `${Math.random() * 40 + 10}px` }"></span>
<span v-for="i in 30" :key="i" class="wave-bar"
:style="{ height: `${Math.random() * 40 + 10}px` }"></span>
</div>
</div>
<div class="audio-player">
<el-slider v-model="ttsCurrentTime" :max="ttsDuration" :show-tooltip="false" style="flex: 1;"></el-slider>
<el-slider v-model="ttsCurrentTime" :max="ttsDuration" :show-tooltip="false"
style="flex: 1;"></el-slider>
<div class="time-info">
<span>{{ formatTime(ttsCurrentTime) }}</span>
<span>{{ formatTime(ttsDuration) }}</span>
@ -256,7 +261,10 @@
</div>
<div class="player-controls">
<el-button circle @click="toggleTtsPlay">
<el-icon><VideoPlay v-if="!ttsPlaying" /><Pause v-else /></el-icon>
<el-icon>
<VideoPlay v-if="!ttsPlaying" />
<!-- <Pause v-else /> -->
</el-icon>
</el-button>
</div>
<div class="preview-actions">
@ -273,24 +281,23 @@
<div class="voice-list">
<div class="voice-item" v-for="item in voiceList" :key="item.id">
<div class="voice-info">
<el-icon><Document /></el-icon>
<el-icon>
<Document />
</el-icon>
<span class="voice-name">{{ item.fileNameExt }}</span>
<span>{{ item.duration }}秒</span>
</div>
<div class="voice-player" v-if="playingVoiceId === item.id">
<el-slider v-model="voiceCurrentTime" :max="voiceDuration" :show-tooltip="false" style="flex: 1;"></el-slider>
<div class="time-info">
<span>{{ formatTime(voiceCurrentTime) }}</span>
<span>{{ formatTime(voiceDuration) }}</span>
</div>
<el-button circle @click="toggleVoicePlay(item.id)">
<el-icon><VideoPlay v-if="!voicePlaying" /><Pause v-else /></el-icon>
<div class="voice-actions">
<el-button link type="primary" @click="toggleVoicePlay(item.id)">
{{ playingVoiceId === item.id && voicePlaying ? '暂停' : '播放' }}
</el-button>
<el-button link type="danger" @click="deleteVoiceById(item.fileId)">删除</el-button>
<el-button link type="primary" @click="renameVoice(item)">重命名</el-button>
<el-button link type="primary"
:class="{ 'active': item.useStatus, 'btn-default': !item.useStatus }"
:disabled="item.useStatus == 1" @click="useVoice(item.id)">
{{ item.useStatus == 1 ? '使用中' : '使用' }}
</el-button>
</div>
<div class="voice-actions" v-else>
<el-button link type="primary" @click="playVoiceById(item.id)">播放</el-button>
<el-button link type="danger" @click="deleteVoiceById(item.fileId )">删除</el-button>
<el-button link type="primary" @click="renameVoice(item.fileId)">重命名</el-button>
<el-button type="primary" @click="useVoice(item.id)">使用</el-button>
</div>
</div>
</div>
@ -312,7 +319,6 @@
<script setup name="DeviceControl" lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useMqtt } from '@/utils/mqtt';
import api from '@/api/controlCenter/controlPanel/100J';
import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
@ -322,7 +328,7 @@ import { getDeviceStatus } from '@/utils/function';
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import request from '@/utils/request';
// 导入图片资源
import closeDefault from '@/assets/images/close.png';
import closeActive from '@/assets/images/close_HL.png';
@ -330,6 +336,7 @@ import rb from '@/assets/images/rb.png';
import rbAc from '@/assets/images/rbAc.png';
import sg from '@/assets/images/sg.png';
import sgAc from '@/assets/images/sgAc.png';
import { object } from 'vue-types';
// 基础状态
const forceAlarmLoading = ref(false);
@ -422,13 +429,13 @@ const saveRecordVoice = () => {
return;
}
const formData = new FormData();
formData.append('voiceFile', recordedBlob.value, `record_${new Date().getTime()}.mp3`);
formData.append('file', recordedBlob.value, `record_${new Date().getTime()}.mp3`);
formData.append('deviceId', route.params.deviceId as string);
proxy?.$modal.loading('保存中...', { lock: true });
proxy?.$modal.loading('保存中...');
api.uploadAudioToOss(formData).then(res => {
proxy?.$modal.closeLoading();
if (res.code === 200) {
proxy?.$modal.msgSuccess('语音录制并保存成功');
proxy?.$modal.msgSuccess('保存成功');
recordVoiceDialog.value = false;
queryAudioFileInfo();
resetRecord();
@ -478,9 +485,9 @@ const handleFileUpload = (e: Event) => {
const confirmUploadVoice = () => {
if (!uploadFile.value) return;
const formData = new FormData();
formData.append('voiceFile', uploadFile.value);
formData.append('file', uploadFile.value);
formData.append('deviceId', route.params.deviceId as string);
proxy?.$modal.loading('上传中...', { lock: true });
proxy?.$modal.loading('上传中...');
api.uploadAudioToOss(formData).then(res => {
proxy?.$modal.closeLoading();
if (res.code === 200) {
@ -511,11 +518,6 @@ const ttsPlaying = ref(false);
const ttsCurrentTime = ref(0);
const ttsDuration = ref(0);
let ttsAudio: HTMLAudioElement | null = null;
const handleUploadText = () => {
proxy?.$modal.msgInfo('上传文本功能开发中');
};
const convertTextToVoice = async () => {
if (!textToVoiceForm.value.content.trim()) {
proxy?.$modal.msgWarning('请输入要转换的文字内容');
@ -525,17 +527,17 @@ const convertTextToVoice = async () => {
try {
const res = await api.videTtsToOss({
deviceId: route.params.deviceId,
content: textToVoiceForm.value.content
text: textToVoiceForm.value.content
});
if (res.code === 200) {
ttsResultUrl.value = res.data.url;
ttsDuration.value = res.data.duration || 145;
ttsResultUrl.value = res.data;
ttsDuration.value = res.data;
proxy?.$modal.msgSuccess('文字转语音成功');
textToVoiceDialog.value = false
} else {
proxy?.$modal.msgError('转换失败：' + res.msg);
proxy?.$modal.msgError(res.msg);
}
} catch (err) {
proxy?.$modal.msgError('转换失败');
} finally {
ttsLoading.value = false;
}
@ -552,7 +554,7 @@ const toggleTtsPlay = () => {
};
}
if (ttsPlaying.value) {
ttsAudio.pause();
// ttsAudio.pause();
ttsPlaying.value = false;
} else {
ttsAudio.play();
@ -570,7 +572,7 @@ const useTtsResult = () => {
proxy?.$modal.msgSuccess('语音已设置为当前使用');
textToVoiceDialog.value = false;
};
// 上传语音
const handleTextToVoice = () => {
textToVoiceDialog.value = true;
textToVoiceForm.value = { content: '' };
@ -583,71 +585,75 @@ const handleTextToVoice = () => {
const allVoiceDialog = ref(false);
const playingVoiceId = ref('');
const voicePlaying = ref(false);
const voiceCurrentTime = ref(0);
const voiceDuration = ref(0);
let voiceAudio: HTMLAudioElement | null = null;
const playVoiceById = async (voiceId: string) => {
// 播放弹框
const toggleVoicePlay = async (voiceId: string) => {
// 如果当前点击的是正在播放的语音，直接暂停
if (playingVoiceId.value === voiceId && voicePlaying.value) {
voiceAudio?.pause();
voicePlaying.value = false;
return;
}
playingVoiceId.value = voiceId;
// 如果有其他语音正在播放，先暂停
if (voicePlaying.value && voiceAudio) {
voiceAudio.pause();
voicePlaying.value = false;
}
// 播放当前选中的语音
const voice = voiceList.value.find(v => v.id === voiceId);
if (!voice) return;
if (voiceAudio) voiceAudio.pause();
voiceAudio = new Audio(voice.url);
voiceDuration.value = voice.duration || 145;
voiceAudio.ontimeupdate = () => voiceCurrentTime.value = Math.floor(voiceAudio!.currentTime);
voiceAudio.onended = () => {
if (!voice || !voice.fileUrl) {
proxy?.$modal.msgWarning('语音文件不存在');
return;
}
try {
playingVoiceId.value = voiceId;
voiceAudio = new Audio(voice.fileUrl);
// 仅保留播放结束后的状态重置
voiceAudio.onended = () => {
voicePlaying.value = false;
playingVoiceId.value = '';
};
await voiceAudio.play();
voicePlaying.value = true;
} catch (err: any) {
proxy?.$modal.msgError(err.msg);
playingVoiceId.value = '';
voicePlaying.value = false;
voiceCurrentTime.value = 0;
};
await voiceAudio.play();
voicePlaying.value = true;
};
const toggleVoicePlay = (voiceId: string) => {
if (voicePlaying.value) {
voiceAudio?.pause();
voicePlaying.value = false;
} else {
playVoiceById(voiceId);
}
};
const deleteVoiceById = async (fileId : string) => {
// 删除语音
const deleteVoiceById = async (fileId: string) => {
try {
await ElMessageBox.confirm('确定要删除该语音？', '提示');
const res = await api.deviceDeleteAudioFile({ deviceId: route.params.deviceId, fileId });
const res = await api.deviceDeleteAudioFile({ deviceId: route.params.deviceId, fileId });
if (res.code === 200) {
proxy?.$modal.msgSuccess('删除成功');
proxy?.$modal.msgSuccess(res.msg);
queryAudioFileInfo();
} else {
proxy?.$modal.msgError('删除失败');
proxy?.$modal.msgError(res.msg);
}
} catch (err) {}
} catch (err) { }
};
const renameVoice = async (fileId: string) => {
// 重命名
const renameVoice = async (item: any) => {
const { value } = await ElMessageBox.prompt('请输入新名称', '重命名', { inputPlaceholder: '请输入新名称' });
if (value) {
const res = await api.videRenameAudioFile({ deviceId: route.params.deviceId, fileId, fileName: value });
const res = await api.videRenameAudioFile({ deviceId: route.params.deviceId, fileId:item.fileId, fileName: value });
if (res.code === 200) {
proxy?.$modal.msgSuccess('重命名成功');
proxy?.$modal.msgSuccess(res.msg);
queryAudioFileInfo();
} else {
proxy?.$modal.msgError('重命名失败');
proxy?.$modal.msgError(res.msg);
}
}
};
// 使用
const useVoice = async (voiceId: string) => {
const res = await api.deviceUpdateVoice({id: voiceId });
const res = await api.deviceUpdateVoice({ id: voiceId });
if (res.code === 200) {
proxy?.$modal.msgSuccess('已设置为当前语音');
proxy?.$modal.msgSuccess(res.msg);
currentVoiceId.value = voiceId;
await queryAudioFileInfo()
} else {
proxy?.$modal.msgError('设置失败');
}
@ -661,7 +667,7 @@ const handleAllVoice = () => {
// ====================== 原有功能 ======================
const sta_VoiceType = ref([
{ id: '0', name: '公安', icon: sg, activeIcon: sgAc, switchStatusVioice: true, active: true },
{ id: 'fire', name: '消防', icon: sg, activeIcon: sgAc, switchStatusVioice: false, active: false },
{ id: '1', name: '消防', icon: sg, activeIcon: sgAc, switchStatusVioice: false, active: false },
{ id: '2', name: '应急', icon: sg, activeIcon: sgAc, switchStatusVioice: false, active: false },
{ id: '3', name: '交警', icon: sg, activeIcon: sgAc, switchStatusVioice: false, active: false },
{ id: '4', name: '市政', icon: sg, activeIcon: sgAc, switchStatusVioice: false, active: false },
@ -681,22 +687,23 @@ const lightModes = ref<LightMode[]>([
]);
const deviceDetail = ref<DeviceDetail & { typeName: string }>({
lightBrightness: '50',
deviceName: 'HBY100',
deviceImei: 'HBY100J',
lightBrightness: '20',
deviceName: '',
deviceImei: '',
onlineStatus: 1,
batteryPercentage: 80,
batteryRemainingTime: '1小时55分钟',
longitude: '114.1167',
latitude: '30.4744',
address: '湖北省武汉市洪山区光谷大国际企业中心',
batteryRemainingTime: '',
longitude: '',
latitude: '',
address: '',
sendMsg: '',
chargeState: '0',
typeName: '',
alarmStatus: 0,
strobeFrequency: '50',
strobeFrequency: '10',
volume: '50',
voiceStrobeAlarm: 0
voiceStrobeAlarm: 0,
voiceBroadcast: 0
});
const isUpdatingStatus = ref(false);
@ -704,26 +711,51 @@ const isSyncingStatus = ref(false);
const queryAudioFileInfo = () => {
api.queryAudioFileList({ deviceId: route.params.deviceId }).then(res => {
voiceList.value = res.data || [];
if (res.code == 200) {
voiceList.value = res.data || [];
const activeVoice = voiceList.value.find(item => item.useStatus === 1);
if (activeVoice) {
currentVoiceId.value = activeVoice.id;
}
}
}).catch(err => proxy?.$modal.msgError('获取语音列表失败'));
};
// 报警模式
const handleVoiceType = async (targetId: string) => {
const deviceId = route.params.deviceId as string;
if (!deviceId) return;
const targetMode = sta_VoiceType.value.find(mode => mode.id === targetId);
if (!targetMode || targetMode.active) return;
if (!targetMode) return;
//切换选中状态
const isCurrentlyActive = targetMode.active;
sta_VoiceType.value.forEach(mode => {
mode.active = mode.id === targetId;
mode.switchStatusVioice = mode.active;
mode.active = false;
mode.switchStatusVioice = false;
});
const params = { deviceIds: [deviceId], voiceStrobeAlarm: 1, mode: targetId };
try {
const res = await api.SosSetting(params);
if (res.code === 200) proxy?.$modal.msgSuccess(res.msg);
} catch (error) { await getList(); }
// 如果当前是未选中状态，则选中；如果是选中状态，则取消
if (!isCurrentlyActive) {
targetMode.active = true;
targetMode.switchStatusVioice = true;
}
// 只有在报警中时，才发送请求
if (deviceDetail.value.voiceStrobeAlarm == 1) {
const params = {
deviceIds: [deviceId],
voiceStrobeAlarm: 1,
mode: isCurrentlyActive ? '' : targetId
};
try {
const res = await api.SosSetting(params);
if (res.code === 200) proxy?.$modal.msgSuccess(res.msg);
} catch (error) {
await getList();
}
}
};
// 警示灯爆闪模
const handleModeClick = async (modeId: string) => {
if (isUpdatingStatus.value || isSyncingStatus.value) return;
try {
@ -732,11 +764,26 @@ const handleModeClick = async (modeId: string) => {
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 });
const isCurrentlyActive = targetMode.active;
const enable = isCurrentlyActive ? 0 : 1; // 选中则关闭，未选中则开启
//关闭时传 enable:0，开启时传 enable:1
const res = await api.strobeMode({
deviceId,
mode: targetMode.instructValue,
enable
});
if (res.code === 200) {
ElMessage.closeAll();
proxy?.$modal.msgSuccess(res.msg);
setActiveLightMode(modeId);
if (enable === 0) {
lightModes.value.forEach(mode => {
mode.active = false;
mode.switchStatus = false;
});
} else {
setActiveLightMode(modeId);
}
} else {
proxy?.$modal.msgError(res.msg);
const prevActiveMode = lightModes.value.find(m => m.active);
@ -745,9 +792,11 @@ const handleModeClick = async (modeId: string) => {
} catch (error) {
const prevActiveMode = lightModes.value.find(m => m.active);
if (prevActiveMode) setActiveLightMode(prevActiveMode.id);
} finally { isUpdatingStatus.value = false; }
} finally {
isUpdatingStatus.value = false;
}
};
// 全局性的方法
const setActiveLightMode = (targetModeId: string) => {
isSyncingStatus.value = true;
lightModes.value.forEach(mode => {
@ -757,31 +806,43 @@ const setActiveLightMode = (targetModeId: string) => {
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;
// 警示灯模式初始化
const mainLightMode = String(res.data.strobeMode);
const matchedMode = lightModes.value.find(mode => mode.instructValue === mainLightMode);
if (matchedMode) setActiveLightMode(matchedMode.id);
// 报警模式初始化
const alarmMode = String(res.data.alarmMode);
const voiceStrobeAlarm = String(res.data.voiceStrobeAlarm);
sta_VoiceType.value.forEach(mode => {
mode.active = false;
mode.switchStatusVioice = false;
});
//如果接口返回无选中，默认选中第一个
let hasActiveMode = false;
if (voiceStrobeAlarm === '1') {
const matchedVoiceMode = sta_VoiceType.value.find(mode => mode.id === alarmMode);
if (matchedVoiceMode) {
matchedVoiceMode.active = true;
matchedVoiceMode.switchStatusVioice = true;
hasActiveMode = true;
}
}
} catch (error) { console.error('获取设备详情失败:', error); }
// 无选中时默认选中第一个
if (!hasActiveMode) {
sta_VoiceType.value[0].active = true;
sta_VoiceType.value[0].switchStatusVioice = true;
}
} catch (error) { console.log('获取设备详情失败:', error); }
};
// 灯光亮度
const saveBtnlight = () => {
lightModesLoading.value = true;
const data = { deviceId: route.params.deviceId, brightness: deviceDetail.value.lightBrightness };
@ -792,6 +853,7 @@ const saveBtnlight = () => {
}).catch(() => lightModesLoading.value = false);
};
// 爆闪频率
const saveBtnstrobe = () => {
const data = { deviceId: route.params.deviceId, frequency: deviceDetail.value.strobeFrequency };
api.staticPowerSetting(data).then(res => {
@ -799,6 +861,7 @@ const saveBtnstrobe = () => {
}).catch(err => proxy?.$modal.msgError('保存爆闪频率失败'));
};
// 音 量
const saveBtnVolume = () => {
const data = { deviceId: route.params.deviceId, volume: deviceDetail.value.volume };
api.settingUpdateVolume(data).then(res => {
@ -806,44 +869,98 @@ const saveBtnVolume = () => {
}).catch(err => proxy?.$modal.msgError('保存音量失败'));
};
// 解除报警
const showClose = async () => {
try {
await proxy?.$modal.confirm('确定要对该设备解除报警？', '提示');
const data = { deviceIds: [route.params.deviceId], typeName: deviceDetail.value.typeName, deviceImeiList: [deviceDetail.value.deviceImei], instructValue: '0' };
const res = await api.forceAlarm(data);
// 获取当前选中的mode
const currentMode = sta_VoiceType.value.find(mode => mode.active)?.id || '0';
const data = {
deviceIds: [route.params.deviceId],
voiceStrobeAlarm: 0,
mode: currentMode
};
const res = await api.SosSetting(data);
if (res.code === 200) {
proxy?.$modal.msgSuccess('解除报警成功');
deviceDetail.value.voiceStrobeAlarm = 0;
proxy?.$modal.msgSuccess(res.msg);
await getList();
}
} catch (error: any) { if (error !== 'cancel') proxy?.$modal.msgError('解除报警失败'); }
} catch (error: any) {
proxy?.$modal.msgError(error.msg);
}
};
// 强制报警
const forceAlarm = async () => {
try {
await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
forceAlarmLoading.value = true;
const data = { deviceIds: [route.params.deviceId], typeName: deviceDetail.value.typeName, deviceImeiList: [deviceDetail.value.deviceImei], instructValue: '1' };
const res = await api.forceAlarm(data);
// 获取当前选中的mode
const currentMode = sta_VoiceType.value.find(mode => mode.active)?.id || '0';
const data = {
deviceIds: [route.params.deviceId],
voiceStrobeAlarm: 1,
mode: currentMode
};
const res = await api.SosSetting(data);
if (res.code === 200) {
proxy?.$modal.msgSuccess('强制报警已开启');
deviceDetail.value.voiceStrobeAlarm = 1;
proxy?.$modal.msgSuccess(res.msg);
await getList();
}
} catch (error: any) { if (error !== 'cancel') proxy?.$modal.msgError('强制报警失败'); } finally { forceAlarmLoading.value = false; }
} catch (error: any) {
proxy?.$modal.msgError(error.msg);
} finally {
forceAlarmLoading.value = false;
}
};
// 查看跳转到地图设备
const lookMap = (row: any) => {
router.push({ path: '/controlCenter/controlPanel', query: { view: 'map', deviceId: row.deviceId } });
};
const playCurrentVoice = () => {
if (!currentVoiceId.value) {
proxy?.$modal.msgWarning('请先选择语音');
return;
// 播放如果，在强制报警中，点击播放的时候描会报警语音，如果没有报警中，就是的单纯的播放语音这个逻辑
const playCurrentVoice = async () => {
// 1. 报警中场景：播放/切换报警语音
if (deviceDetail.value.voiceStrobeAlarm === 1) {
try {
const currentMode = sta_VoiceType.value.find(mode => mode.active)?.id || '0';
const data = {
deviceIds: [route.params.deviceId],
voiceStrobeAlarm: 1,
mode: currentMode
};
const res = await api.SosSetting(data);
if (res.code === 200) {
proxy?.$modal.msgSuccess(res.msg);
await getList();
} else {
proxy?.$modal.msgError(res.msg);
}
} catch (err: any) {
proxy?.$modal.msgError(err.msg);
}
}
// 2. 非报警中场景：单纯播放/暂停语音
else {
const targetStatus = deviceDetail.value.voiceBroadcast === 1 ? 0 : 1;
try {
const res = await api.deviceVoiceBroadcast({
deviceId: route.params.deviceId,
voiceBroadcast: targetStatus
});
if (res.code === 200) {
deviceDetail.value.voiceBroadcast = targetStatus;
proxy?.$modal.msgSuccess(res.msg);
await getList();
} else {
proxy?.$modal.msgError(res.msg);
}
} catch (err: any) {
proxy?.$modal.msgError(err.msg);
}
}
api.playVoice({ deviceId: route.params.deviceId, voiceId: currentVoiceId.value }).then(res => {
if (res.code === 200) proxy?.$modal.msgSuccess('开始播放语音');
else proxy?.$modal.msgError('播放语音失败：' + res.msg);
}).catch(err => proxy?.$modal.msgError('播放语音失败'));
};
onMounted(async () => {
@ -856,7 +973,7 @@ onUnmounted(() => {
if (recordTimer) clearInterval(recordTimer);
if (mediaRecorder.value && isRecording.value) mediaRecorder.value.stop();
if (audioStream) audioStream.getTracks().forEach(track => track.stop());
if (ttsAudio) ttsAudio.pause();
// if (ttsAudio) ttsAudio.pause();
if (voiceAudio) voiceAudio.pause();
});
</script>
@ -882,13 +999,20 @@ onUnmounted(() => {
font-weight: 600;
.device-status {
.online { color: #00ff00; }
.offline { color: rgb(224, 52, 52); }
.online {
color: #00ff00;
}
.offline {
color: rgb(224, 52, 52);
}
}
}
.content-wrapper {
.content-row { margin-bottom: 20px; }
.content-row {
margin-bottom: 20px;
}
.content-card {
border-radius: 8px;
@ -896,7 +1020,7 @@ onUnmounted(() => {
background: white;
padding: 20px;
border: 1px solid #ebeef5;
min-height:730px;
min-height: 730px;
}
.content-card1 {
@ -914,6 +1038,7 @@ onUnmounted(() => {
background: white;
padding: 20px;
border: 1px solid #ebeef5;
min-height: 240px;
}
.section-title {
@ -985,6 +1110,7 @@ onUnmounted(() => {
display: flex;
gap: 10px;
margin-bottom: 10px;
height: 100px;
}
.brightness-alarm {
@ -1030,13 +1156,13 @@ onUnmounted(() => {
.alarm-btn {
background-color: rgba(224, 52, 52, 1);
border-color: rgba(224, 52, 52, 1);
padding: 8px 20px;
border-radius: 27px;
padding: 20px 20px;
border-radius: 30px;
&.cancel {
background-color: #f0f0f0;
border-color: #dcdfe6;
color: #606266;
background-color: rgba(224, 52, 52, 0.08);
border-color: rgba(224, 52, 52, 0.08);
color: rgba(224, 52, 52, 1);
}
}
}
@ -1141,18 +1267,22 @@ onUnmounted(() => {
border-radius: 8px;
overflow: hidden;
}
:deep(.el-dialog__header) {
padding: 16px 20px;
border-bottom: 1px solid #ebeef5;
margin: 0;
}
:deep(.el-dialog__headerbtn) {
top: 16px;
right: 20px;
}
:deep(.el-dialog__body) {
padding: 20px;
}
:deep(.el-dialog__footer) {
padding: 16px 20px;
border-top: 1px solid #ebeef5;
@ -1422,13 +1552,19 @@ onUnmounted(() => {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.7);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(64, 158, 255, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(64, 158, 255, 0);
}
}
.active {
color: #3333;
}
</style>