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-19 13:52:37 +08:00
parent fee33a68c6
commit 09539ecfb8
7 changed files with 26 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/dw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 523 B

BIN
src/assets/images/jwd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 330 B

BIN
src/assets/images/ly.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/lz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/images/zk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 320 B

BIN
src/assets/images/zt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 125 B

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

@ -74,27 +74,19 @@
<span class="voice-label">语音管理</span> <span class="voice-label">语音管理</span>
<div class="voice-manage-btns"> <div class="voice-manage-btns">
<div class="voice-btn-item" @click="handleRecordVoice"> <div class="voice-btn-item" @click="handleRecordVoice">
<el-icon> <img src="@/assets/images/组 62.png" alt="">
<Microphone />
</el-icon>
<span>录制语音</span> <span>录制语音</span>
</div> </div>
<div class="voice-btn-item" @click="handleUploadVoice"> <div class="voice-btn-item" @click="handleUploadVoice">
<el-icon> <img src="@/assets/images/组 62.png" alt="">
<Microphone />
</el-icon>
<span>上传语音</span> <span>上传语音</span>
</div> </div>
<div class="voice-btn-item" @click="handleTextToVoice"> <div class="voice-btn-item" @click="handleTextToVoice">
<el-icon> <img src="@/assets/images/组 62.png" alt="">
<Microphone />
</el-icon>
<span>文字转语音</span> <span>文字转语音</span>
</div> </div>
<div class="voice-btn-item" @click="handleAllVoice"> <div class="voice-btn-item" @click="handleAllVoice">
<el-icon> <img src="@/assets/images/组 62.png" alt="">
<Microphone />
</el-icon>
<span>所有语音</span> <span>所有语音</span>
</div> </div>
</div> </div>
@ -113,7 +105,9 @@
<h4 class="section-title">位置信息</h4> <h4 class="section-title">位置信息</h4>
<div class="location-info"> <div class="location-info">
<div class="location-item"> <div class="location-item">
<span class="location-icon">📍</span> <span class="location-icon">
<img src="@/assets/images/jwd.png" alt="">
</span>
<div style="font-weight: 600; font-size: 14px;">经纬度 <div style="font-weight: 600; font-size: 14px;">经纬度
<div style="margin-top: 10px;">{{ deviceDetail && deviceDetail.longitude ? <div style="margin-top: 10px;">{{ deviceDetail && deviceDetail.longitude ?
Number(deviceDetail.longitude).toFixed(4) : '0.00' }} Number(deviceDetail.longitude).toFixed(4) : '0.00' }}
@ -124,7 +118,7 @@
</div> </div>
<div class="location-item1"> <div class="location-item1">
<div>地址</div> <div> <img src="@/assets/images/dw.png" alt="">&nbsp;&nbsp;地址</div>
<el-button link type="primary" class="view-btn" <el-button link type="primary" class="view-btn"
@click="lookMap(deviceDetail)">查看</el-button> @click="lookMap(deviceDetail)">查看</el-button>
</div> </div>
@ -175,40 +169,31 @@
<div class="record-content"> <div class="record-content">
<!-- 波形图 --> <!-- 波形图 -->
<div class="waveform-container"> <div class="waveform-container">
<div class="waveform" v-if="isRecording"> <img src="@/assets/images/lz.png" alt="">
<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>
</div>
</div> </div>
<!-- 录制控制区 --> <!-- 录制控制区 -->
<div class="record-control"> <div class="record-control">
<div class="mic-icon" :class="{ recording: isRecording }"> <div class="mic-icon" :class="{ recording: isRecording }">
<el-icon> <img src="@/assets/images/ly.png" alt="">
<Microphone />
</el-icon>
</div> </div>
<div class="record-time">{{ formatTime(recordDuration) }}</div> <div class="record-time">{{ formatTime(recordDuration) }}</div>
<div class="record-play-btn"> <div class="record-play-btn">
<el-button v-if="isRecording" type="danger" circle @click="stopRecordVoice"> <div v-if="isRecording" circle @click="stopRecordVoice">
<el-icon> <img src="@/assets/images/zt.png" alt="">
<!-- <Pause /> -->
</el-icon>
</el-button>
<el-button v-else type="primary" circle @click="startRecordVoice">
<el-icon>
<VideoPlay />
</el-icon>
</el-button>
</div> </div>
<div v-else circle @click="startRecordVoice">
<img src="@/assets/images/zk.png" alt="">
</div>
</div>
</div> </div>
<!-- 底部操作 --> <!-- 底部操作 -->
<div class="record-footer"> <div class="record-footer">
<el-button link type="primary" @click="resetRecord" :disabled="isRecording">重新录制</el-button> <el-button link type="info" @click="resetRecord" :disabled="isRecording">重新录制</el-button>
<el-button type="primary" class="record-confirm" @click="saveRecordVoice" <el-button v-if="isRecording" type="info" @click="stopRecordVoice">暂停</el-button>
:disabled="!recordedBlob">完成</el-button> <el-button v-else type="danger" class="record-cancel-btn" @click="startRecordVoice">开始录制</el-button>
<el-button link type="primary" class="record-confirm" @click="saveRecordVoice">完成</el-button>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@ -242,7 +227,7 @@
<!-- 文字转语音弹窗 --> <!-- 文字转语音弹窗 -->
<el-dialog title="文字转语音" v-model="textToVoiceDialog" width="520px" class="voice-dialog" :show-close="true"> <el-dialog title="文字转语音" v-model="textToVoiceDialog" width="520px" class="voice-dialog" :show-close="true">
<div class="tts-content"> <div class="tts-content">
<el-input v-model="textToVoiceForm.content" type="textarea" rows="4" placeholder="请输入要转换的文字内容" <el-input v-model="textToVoiceForm.content" type="textarea" placeholder="请输入要转换的文字内容"
class="tts-textarea"></el-input> class="tts-textarea"></el-input>
<div class="tts-actions"> <div class="tts-actions">
<!-- <el-button link type="primary" @click="handleUploadText">上传文本</el-button> --> <!-- <el-button link type="primary" @click="handleUploadText">上传文本</el-button> -->
@ -1223,7 +1208,7 @@ onUnmounted(() => {
.location-item { .location-item {
display: flex; display: flex;
align-items: center; // align-items: center;
margin-bottom: 15px; margin-bottom: 15px;
font-size: 14px; font-size: 14px;
color: #606266; color: #606266;
@ -1389,8 +1374,8 @@ onUnmounted(() => {
.mic-icon { .mic-icon {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 50%; // border-radius: 50%;
background: rgba(64, 158, 255, 0.1); // background: rgba(64, 158, 255, 0.1);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;