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
Split 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'
// 查询会议列表
export function listMeeting(query) {
// 视讯-会议列表
export function listConsultation(query) {
return request({
url: '/videoCommunication/meeting/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',
url: '/v1/consultation/list',
method: 'get',
params: query
})

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

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