suojin
/
HIYL-localization-web
23
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

工具-页面调整

Browse Source
main
ysn 1 week ago
parent c59c21e94b
commit 537f50b1be
2 changed files with 156 additions and 215 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 82
      src/api/videoCommunication.js
  2. 287
      src/views/utility/index.vue

82
src/api/videoCommunication.js
Unescape View File

@ -1,85 +1,9 @@
import request from '@/utils/request' import request from '@/utils/request'
// 查询会议列表 // 视讯-会议列表
export function listMeeting(query) { export function listConsultation(query) {
return request({ return request({
url: '/videoCommunication/meeting/list', url: '/v1/consultation/list',
method: 'get',
params: query
})
}
// 查询会议详情
export function getMeeting(id) {
return request({
url: '/videoCommunication/meeting/' + id,
method: 'get'
})
}
// 新增会议
export function addMeeting(data) {
return request({
url: '/videoCommunication/meeting',
method: 'post',
data: data
})
}
// 修改会议
export function updateMeeting(data) {
return request({
url: '/videoCommunication/meeting',
method: 'put',
data: data
})
}
// 删除会议
export function delMeeting(id) {
return request({
url: '/videoCommunication/meeting/' + id,
method: 'delete'
})
}
// 加入会议
export function joinMeeting(data) {
return request({
url: '/videoCommunication/meeting/join',
method: 'post',
data: data
})
}
// 开始会议
export function startMeeting(id) {
return request({
url: '/videoCommunication/meeting/start/' + id,
method: 'post'
})
}
// 结束会议
export function endMeeting(id) {
return request({
url: '/videoCommunication/meeting/end/' + id,
method: 'post'
})
}
// 获取会议回放
export function getMeetingReplay(id) {
return request({
url: '/videoCommunication/meeting/replay/' + id,
method: 'get'
})
}
// 查询会议统计
export function getMeetingStats(query) {
return request({
url: '/videoCommunication/meeting/stats',
method: 'get', method: 'get',
params: query params: query
}) })

287
src/views/utility/index.vue
Unescape View File

@ -1,164 +1,180 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<!-- 传输管理器卡片 -->
<el-card> <el-card>
<!-- 头部：标题 + 清空按钮 -->
<div slot="header"> <div slot="header">
<span>传输管理器</span> <span>传输管理器</span>
<el-button <el-button
style="float: right; padding: 3px 0" style="float: right; padding: 3px 0"
type="text" type="text"
icon="el-icon-delete"
@click="handleClearRecords" @click="handleClearRecords"
> >
清空记录 清空记录
</el-button> </el-button>
</div> </div>
<el-divider> <div v-for="(dateItem, index) in transferDataList" :key="index">
<el-tag type="info">2026-05-13</el-tag> <!-- 日期分割线 -->
</el-divider> <el-divider>
<el-table :data="fileList" :show-header="false"> <el-tag type="info">{{ dateItem.date }}</el-tag>
<el-table-column prop="name" label="缩略图" width="80" align="center"> </el-divider>
<template slot-scope="scope"> <!-- 传输记录表格 -->
<div class="video-thumb"> <el-table :data="dateItem.list" :show-header="false">
<i class="el-icon-video-camera" /> <el-table-column label="缩略图标" width="80" align="center">
</div> <template slot-scope="scope">
</template> <div class="video-thumb">
</el-table-column> <i class="el-icon-video-camera" />
<el-table-column prop="name" label="文件名" show-overflow-tooltip /> </div>
<el-table-column </template>
prop="size" </el-table-column>
label="文件大小" <el-table-column prop="name" label="文件名" show-overflow-tooltip />
width="120" <el-table-column
align="center" prop="size"
show-overflow-tooltip label="文件大小"
/> width="120"
<el-table-column align="center"
prop="progress" show-overflow-tooltip
label="上传进度" />
width="200" <el-table-column
align="center" prop="progress"
> label="上传进度"
<template slot-scope="scope"> width="200"
<el-progress :percentage="scope.row.progress" /> align="center"
</template> >
</el-table-column> <template slot-scope="scope">
<el-table-column <el-progress :percentage="scope.row.progress" stroke-width="8" />
prop="time" </template>
label="上传时间" </el-table-column>
width="120" <el-table-column
align="center" prop="time"
show-overflow-tooltip label="上传时间"
/> width="100"
<el-table-column align="center"
prop="status" show-overflow-tooltip
label="上传状态" />
width="90" <el-table-column
align="center" prop="status"
show-overflow-tooltip label="上传状态"
> width="100"
<template slot-scope="scope"> align="center"
<el-tag> >
{{ scope.row.status }} <template slot-scope="scope">
</el-tag> <el-tag
</template> :type="scope.row.status === '上传成功' ? 'success' : 'warning'"
</el-table-column> >
<el-table-column label="操作" width="180" align="center"> {{ scope.row.status }}
<template slot-scope="scope"> </el-tag>
<el-button </template>
type="text" </el-table-column>
icon="el-icon-view" <!-- 操作按钮 -->
@click="handleOpen(scope.row)" <el-table-column label="操作" width="200" align="center">
> <template slot-scope="scope">
打开 <el-button
</el-button> type="text"
<el-button icon="el-icon-view"
type="text" @click="handleOpenFile(scope.row)"
icon="el-icon-folder" >
@click="handleOpenPath(scope.row)" 打开
> </el-button>
打开位置 <el-button
</el-button> type="text"
</template> icon="el-icon-folder-opened"
</el-table-column> @click="handleOpenFolder(scope.row)"
</el-table> >
打开位置
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "TransferManager", name: "Utility",
data() { data() {
return { return {
// 模拟数据（实际项目中 filePath 应为网络可访问地址） // 最终渲染数据：数组结构，包含日期 + 文件列表
fileList: [ transferDataList: [],
{
id: 1,
name: "1633500241136.mp4",
size: "17.92M",
progress: 100,
time: "14:31",
status: "上传成功",
// 浏览器环境：必须使用网络URL，不能使用本地D盘路径
filePath: "https://www.w3school.com.cn/i/movie.mp4",
folderPath: "D:/手机照片/风景宜人",
},
{
id: 2,
name: "TG-2023-01-21-215030828...",
size: "11.86M",
progress: 100,
time: "14:31",
status: "上传成功",
filePath: "D:/手机照片/风景宜人/1633500241136.mp4", // 文件完整路径（用于预览）
folderPath: "D:/手机照片/风景宜人",
},
{
id: 3,
name: "VID_20230121_200603.mp4",
size: "10.02M",
progress: 100,
time: "14:16",
status: "上传成功",
filePath: "D:/手机照片/风景宜人/1633500241136.mp4", // 文件完整路径（用于预览）
folderPath: "D:/手机照片/风景宜人",
},
],
}; };
}, },
created() {
this.getList();
},
methods: { methods: {
// 清空记录 // 查询列表
getList() {
this.loading = true;
// listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
// (response) => {
this.transferDataList = [
{
date: "2026-05-13",
list: [
{
id: 1,
name: "1633500241136.mp4",
size: "17.92M",
progress: 100,
time: "14:31",
status: "上传成功",
fileUrl: "https://www.w3school.com.cn/i/movie.mp4",
},
{
id: 2,
name: "TG-2023-01-21-215030828.mp4",
size: "11.86M",
progress: 100,
time: "14:31",
status: "上传成功",
fileUrl: "https://www.w3school.com.cn/i/movie.mp4",
},
{
id: 3,
name: "VID_20230121_200603.mp4",
size: "10.02M",
progress: 100,
time: "14:16",
status: "上传成功",
fileUrl: "https://www.w3school.com.cn/i/movie.mp4",
},
],
},
];
// this.total = response.total;
// this.loading = false;
// }
// );
},
// 清空所有传输记录
handleClearRecords() { handleClearRecords() {
this.$modal this.$modal
.confirm("是否要清除本地传输记录?") .confirm("是否要清除本地传输记录?")
.then(() => { .then(() => {
this.fileList = []; this.transferDataList = [];
this.$modal.msgSuccess("清空成功"); this.$modal.msgSuccess("清空成功");
}) })
.catch(() => {}); .catch(() => {});
}, },
// 打开视频文件 // 打开文件
// 注意：浏览器安全限制禁止直接访问本地文件系统 handleOpenFile(row) {
handleOpen(row) { if (!row.fileUrl) {
window.open(row.filePath, "_blank"); this.$modal.msgWarning("文件地址无效，无法打开");
return;
}
window.open(row.fileUrl, "_blank");
}, },
// 打开文件所在文件夹 // 打开文件位置（下载）
// 注意：浏览器安全限制禁止直接访问本地文件系统 handleOpenFolder(row) {
handleOpenPath(row) { this.$modal.msg("浏览器安全限制：请下载后在下载列表打开文件夹");
// const link = document.createElement("a"); const a = document.createElement("a");
// link.href = row.filePath; a.href = row.fileUrl;
// link.download = row.name; a.download = row.name;
// link.click(); document.body.appendChild(a);
// 4. 创建a标签模拟点击下载 a.click();
const link = document.createElement("a"); document.body.removeChild(a);
link.href = row.filePath;
link.download = row.name; // 自定义文件名 + 后缀
document.body.appendChild(link);
link.click();
// 5. 释放内存
document.body.removeChild(link);
window.URL.revokeObjectURL(downloadUrl);
// 弹窗引导操作
this.$message.info(
"文件已开始下载，请在浏览器下载列表右键打开文件所在文件夹"
);
}, },
}, },
}; };
@ -166,14 +182,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.video-thumb { .video-thumb {
width: 40px; width: 42px;
height: 40px; height: 42px;
border-radius: 4px; border-radius: 6px;
line-height: 40px;
text-align: center;
font-size: 20px;
background: #655dd4; background: #655dd4;
color: #fff; color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin: 0 auto; margin: 0 auto;
} }
</style> </style>
Write Preview
Loading…
Cancel
Save