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>
<div class="voice-manage-btns">
<div class="voice-btn-item" @click="handleRecordVoice">
<el-icon>
<Microphone />
</el-icon>
<img src="@/assets/images/组 62.png" alt="">
<span>录制语音</span>
</div>
<div class="voice-btn-item" @click="handleUploadVoice">
<el-icon>
<Microphone />
</el-icon>
<img src="@/assets/images/组 62.png" alt="">
<span>上传语音</span>
</div>
<div class="voice-btn-item" @click="handleTextToVoice">
<el-icon>
<Microphone />
</el-icon>
<img src="@/assets/images/组 62.png" alt="">
<span>文字转语音</span>
</div>
<div class="voice-btn-item" @click="handleAllVoice">
<el-icon>
<Microphone />
</el-icon>
<img src="@/assets/images/组 62.png" alt="">
<span>所有语音</span>
</div>
</div>
@ -113,7 +105,9 @@
<h4 class="section-title">位置信息</h4>
<div class="location-info">
<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="margin-top: 10px;">{{ deviceDetail && deviceDetail.longitude ?
Number(deviceDetail.longitude).toFixed(4) : '0.00' }}
@ -124,7 +118,7 @@
</div>
<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"
@click="lookMap(deviceDetail)">查看</el-button>
</div>
@ -175,40 +169,31 @@
<div class="record-content">
<!-- 波形图 -->
<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>
</div>
<div class="waveform-placeholder" v-else>
<span class="wave-placeholder"></span>
</div>
<img src="@/assets/images/lz.png" alt="">
</div>
<!-- 录制控制区 -->
<div class="record-control">
<div class="mic-icon" :class="{ recording: isRecording }">
<el-icon>
<Microphone />
</el-icon>
<img src="@/assets/images/ly.png" alt="">
</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-button>
<el-button v-else type="primary" circle @click="startRecordVoice">
<el-icon>
<VideoPlay />
</el-icon>
</el-button>
<div v-if="isRecording" circle @click="stopRecordVoice">
<img src="@/assets/images/zt.png" alt="">
</div>
<div v-else circle @click="startRecordVoice">
<img src="@/assets/images/zk.png" alt="">
</div>
</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 link type="info" @click="resetRecord" :disabled="isRecording">重新录制</el-button>
<el-button v-if="isRecording" type="info" @click="stopRecordVoice">暂停</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>
</el-dialog>
@ -242,7 +227,7 @@
<!-- 文字转语音弹窗 -->
<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="请输入要转换的文字内容"
<el-input v-model="textToVoiceForm.content" type="textarea" placeholder="请输入要转换的文字内容"
class="tts-textarea"></el-input>
<div class="tts-actions">
<!-- <el-button link type="primary" @click="handleUploadText">上传文本</el-button> -->
@ -1223,7 +1208,7 @@ onUnmounted(() => {
.location-item {
display: flex;
align-items: center;
// align-items: center;
margin-bottom: 15px;
font-size: 14px;
color: #606266;
@ -1389,8 +1374,8 @@ onUnmounted(() => {
.mic-icon {
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(64, 158, 255, 0.1);
// border-radius: 50%;
// background: rgba(64, 158, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;