Compare commits

...

12 Commits

9 changed files with 886 additions and 75 deletions

View File

@ -1,5 +1,6 @@
package com.god.templateInfo.service.impl;
import com.god.common.utils.uuid.IdUtils;
import com.god.templateInfo.domain.GodTemplateInfo;
import com.god.templateInfo.mapper.GodTemplateInfoMapper;
import com.god.templateInfo.service.IGodTemplateInfoService;
@ -10,85 +11,79 @@ import java.util.List;
/**
* 模板管理Service业务层处理
*
*
* @author Lxz
* @date 2024-06-11
*/
@Service
public class GodTemplateInfoServiceImpl implements IGodTemplateInfoService
{
public class GodTemplateInfoServiceImpl implements IGodTemplateInfoService {
@Autowired
private GodTemplateInfoMapper godTemplateInfoMapper;
/**
* 查询模板管理
*
*
* @param id 模板管理主键
* @return 模板管理
*/
@Override
public GodTemplateInfo selectGodTemplateInfoById(String id)
{
public GodTemplateInfo selectGodTemplateInfoById(String id) {
return godTemplateInfoMapper.selectGodTemplateInfoById(id);
}
/**
* 查询模板管理列表
*
*
* @param godTemplateInfo 模板管理
* @return 模板管理
*/
@Override
public List<GodTemplateInfo> selectGodTemplateInfoList(GodTemplateInfo godTemplateInfo)
{
public List<GodTemplateInfo> selectGodTemplateInfoList(GodTemplateInfo godTemplateInfo) {
return godTemplateInfoMapper.selectGodTemplateInfoList(godTemplateInfo);
}
/**
* 新增模板管理
*
*
* @param godTemplateInfo 模板管理
* @return 结果
*/
@Override
public int insertGodTemplateInfo(GodTemplateInfo godTemplateInfo)
{
public int insertGodTemplateInfo(GodTemplateInfo godTemplateInfo) {
godTemplateInfo.setId(IdUtils.fastUUID());
return godTemplateInfoMapper.insertGodTemplateInfo(godTemplateInfo);
}
/**
* 修改模板管理
*
*
* @param godTemplateInfo 模板管理
* @return 结果
*/
@Override
public int updateGodTemplateInfo(GodTemplateInfo godTemplateInfo)
{
public int updateGodTemplateInfo(GodTemplateInfo godTemplateInfo) {
return godTemplateInfoMapper.updateGodTemplateInfo(godTemplateInfo);
}
/**
* 批量删除模板管理
*
*
* @param ids 需要删除的模板管理主键
* @return 结果
*/
@Override
public int deleteGodTemplateInfoByIds(String[] ids)
{
public int deleteGodTemplateInfoByIds(String[] ids) {
return godTemplateInfoMapper.deleteGodTemplateInfoByIds(ids);
}
/**
* 删除模板管理信息
*
*
* @param id 模板管理主键
* @return 结果
*/
@Override
public int deleteGodTemplateInfoById(String id)
{
public int deleteGodTemplateInfoById(String id) {
return godTemplateInfoMapper.deleteGodTemplateInfoById(id);
}
}

View File

@ -28,7 +28,7 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="equipName != null and equipName != ''"> and equip_name like concat('%', #{equipName}, '%')</if>
<if test="equipId != null and equipId != ''"> and equip_id = #{equipId}</if>
<if test="userName != null and userName != ''"> and user_name like concat('%', #{userName}, '%')</if>
<if test="userId != null and userId != ''"> and user_id = #{userId}</if>
<if test="userId != null and userId != ''"> and user_id like concat('%', #{userId}, '%')</if>
<if test="videoName != null and videoName != ''"> and video_name like concat('%', #{videoName}, '%')</if>
<if test="videoTime != null and videoTime != ''"> and video_time = #{videoTime}</if>
<if test="fileUrl != null and fileUrl != ''"> and file_url = #{fileUrl}</if>

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

View File

@ -90,7 +90,7 @@
<dict-tag :options="dict.type.template_type" :value="scope.row.templateType"/>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="price"/>
<el-table-column label="价格(元)" align="center" prop="price"/>
<el-table-column label="视频" align="center" prop="video" show-overflow-tooltip/>
<el-table-column label="时间" align="center" prop="times">
<template slot-scope="scope">
@ -151,8 +151,8 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="价格" prop="price">
<el-input v-model="form.price" placeholder="请输入价格"/>
<el-form-item label="价格(元)" prop="price">
<el-input v-model="form.price" placeholder="请输入价格(元)"/>
</el-form-item>
<el-form-item label="视频" prop="video">
<el-input v-model="form.video" placeholder="请上传视频" disabled/>

View File

@ -0,0 +1,569 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="模板名称" prop="templateName">
<el-input
v-model="queryParams.templateName"
placeholder="请输入模板名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="模板类型" prop="templateType">
<el-select v-model="queryParams.templateType" placeholder="请选择模板类型" clearable>
<el-option
v-for="dict in dict.type.template_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="活动名称" prop="reserveOne">
<el-select v-model="queryParams.reserveOne" placeholder="请选择活动名称" clearable>
<el-option
v-for="dict in dict.type.hfh_activity_name"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="折扣" prop="reserveTwo">
<el-select v-model="queryParams.reserveTwo" placeholder="请选择折扣类型" clearable>
<el-option
v-for="dict in dict.type.hfh_discount_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="价格" prop="price">-->
<!-- <el-input-->
<!-- v-model="queryParams.price"-->
<!-- placeholder="请输入价格"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- plain-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="handleAdd"-->
<!-- v-hasPermi="['godTemplateInfo:templateInfo:add']"-->
<!-- >新增-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="success"-->
<!-- plain-->
<!-- icon="el-icon-edit"-->
<!-- size="mini"-->
<!-- :disabled="single"-->
<!-- @click="handleUpdate"-->
<!-- v-hasPermi="['godTemplateInfo:templateInfo:edit']"-->
<!-- >修改-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="danger"-->
<!-- plain-->
<!-- icon="el-icon-delete"-->
<!-- size="mini"-->
<!-- :disabled="multiple"-->
<!-- @click="handleDelete"-->
<!-- v-hasPermi="['godTemplateInfo:templateInfo:remove']"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="warning"-->
<!-- plain-->
<!-- icon="el-icon-download"-->
<!-- size="mini"-->
<!-- @click="handleExport"-->
<!-- v-hasPermi="['godTemplateInfo:templateInfo:export']"-->
<!-- >导出-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
<!-- </el-row>-->
<el-table v-loading="loading" :data="templateInfoList" @selection-change="handleSelectionChange" border>
<!-- <el-table-column type="selection" width="55" align="center"/>-->
<el-table-column label="模板名称" align="center" prop="templateName"/>
<el-table-column label="模板类型" align="center" prop="templateType">
<template slot-scope="scope">
<dict-tag :options="dict.type.template_type" :value="scope.row.templateType"/>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="price"/>
<el-table-column label="视频" align="center" prop="video" show-overflow-tooltip/>
<el-table-column label="时间" align="center" prop="times">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.times, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="活动名称" align="center" prop="reserveOne">
<template slot-scope="scope">
<dict-tag :options="dict.type.hfh_activity_name" :value="scope.row.reserveOne"/>
</template>
</el-table-column>
<el-table-column label="折扣" align="center" prop="reserveTwo">
<template slot-scope="scope">
<dict-tag :options="dict.type.hfh_discount_type" :value="scope.row.reserveTwo"/>
</template>
</el-table-column>
<el-table-column label="最终价格" align="center" prop="reserveThree"/>
<el-table-column label="二维码" align="center" prop="reserveFour" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.reserveFour" :width="50" :height="50"/>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['godTemplateInfo:templateInfo:edit']"
>配置
</el-button>
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="handleDelete(scope.row)"-->
<!-- v-hasPermi="['godTemplateInfo:templateInfo:remove']"-->
<!-- >删除-->
<!-- </el-button>-->
<el-button size="mini" type="text" icon="el-icon-video-camera" @click="playVideo(scope.row)"
v-hasPermi="['species:video:remove']"
>查看视频
</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改模板管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<!-- <el-form-item label="主键" prop="id">-->
<!-- <el-input v-model="form.id" placeholder="请输入主键"/>-->
<!-- </el-form-item>-->
<el-row>
<el-col :span="12">
<el-form-item label="模板名称" prop="templateName">
<el-input v-model="form.templateName" placeholder="请输入模板名称" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="模板类型" prop="templateType">
<el-select v-model="form.templateType" placeholder="请选择模板类型" disabled>
<el-option
v-for="dict in dict.type.template_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="价格" prop="price">
<el-input v-model="form.price" placeholder="请输入价格" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="活动名称" prop="reserveOne">
<el-select v-model="form.reserveOne" placeholder="请选择活动名称">
<el-option
v-for="dict in dict.type.hfh_activity_name"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="时间" prop="times">
<el-date-picker clearable
v-model="form.times"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"
disabled
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="折扣" prop="reserveTwo">
<el-select v-model="form.reserveTwo" placeholder="请选择折扣">
<el-option
v-for="dict in dict.type.hfh_discount_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" disabled/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="最终价格" prop="reserveThree">
<el-input v-model="form.reserveThree" placeholder="请输入最终价格"/>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="视频" prop="video">
<el-input v-model="form.video" placeholder="请上传视频" disabled/>
<el-upload class="upload-demo" ref="uploadFile" action="" :on-preview="handlePreview"
:on-remove="handleRemoveFiles" :on-change="handleChangeFiles" :before-upload="beforeUploadFiles"
:file-list="fileList" :auto-upload="true" multiple
>
<el-button size="small" type="primary" disabled>上传视频</el-button>
<div slot="tip" class="el-upload__tip">只能上传mp4文件且不超过100M</div>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二维码" prop="reserveFour">
<image-upload v-model="form.reserveFour"/>
</el-form-item>
</el-col>
</el-row>
<!-- <el-form-item label="文件上传">-->
<!-- <el-upload class="upload-demo" ref="uploadFile" action="" :on-preview="handlePreview"-->
<!-- :on-remove="handleRemoveFiles" :on-change="handleChangeFiles" :before-upload="beforeUploadFiles"-->
<!-- :file-list="fileList" :auto-upload="true" multiple-->
<!-- >-->
<!-- <el-button size="small" type="primary">上传视频</el-button>-->
<!-- <div slot="tip" class="el-upload__tip">只能上传mp4文件且不超过100M</div>-->
<!-- </el-upload>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<el-dialog title :visible="isShow" width="600px" @close="closeDialog" class="videoBox">
<video
:src="videoUrl"
controls
autoplay
class="video"
width="100%"
></video>
</el-dialog>
</div>
</template>
<script>
import {
listTemplateInfo,
getTemplateInfo,
delTemplateInfo,
addTemplateInfo,
updateTemplateInfo
} from '@/api/godTemplateInfo/templateInfo'
import request from '@/utils/request'
import { getToken } from '@/utils/auth'
export default {
name: 'TemplateInfo',
dicts: ['template_type','hfh_activity_name','hfh_discount_type'],
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
templateInfoList: [],
//
title: '',
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
templateName: null,
templateType: null,
price: null,
video: null,
times: null,
sysType: null,
moduleType: 'templateInfo',
reserveOne: null,
reserveTwo: null,
reserveThree: null,
reserveFour: null,
reserveFive: null,
reserveSix: null,
reserveSeven: null,
reserveEight: null,
reserveNine: null
},
//
form: {},
//
rules: {},
//
fileInfoList: [],
fileList: [],
//
upload: {
//
headers: { Authorization: 'Bearer ' + getToken() },
// TODO
url: '/species/video/upload/file',
//
imageUrl: '',
//
data: {
tableName: '',
linkId: '',
workId: ''
}
},
isShow: false,
videoUrl: '',
baseUrl: process.env.VUE_APP_BASE_API
}
},
created() {
this.getList()
},
methods: {
//
playVideo(row) {
this.isShow = true
// src
let url1 = row.video
// this.videoUrl=this.baseUrl+"/profile/upload/2023/10/24/_20231024154211A001.mp4";
this.videoUrl = this.baseUrl + url1
},
/**
* 关闭视频
*/
closeDialog() {
//
this.isShow = false
this.videoUrl = '' //
},
//
submit() {
this.submitUploadFiles()
},
handlePreview(file, fileList) {
console.log('--->>预览文件', file)
},
beforeUploadFiles: (file, fileList) => {
//
//
return false
},
// false Promise rejectfunction(file, fileList)
handleRemoveFiles(file, fileList) {
this.fileList = fileList
},
handleChangeFiles(file, fileList) {
this.fileList = fileList
this.submitUploadFiles()
},
submitUploadFiles() {
if (this.fileList.length === 0) {
return this.$message.warning('请选取文件后再上传')
}
// FormData:
const formData = new FormData()
// 使FormData.append/
this.fileList.forEach((file) => {
formData.append('files', file.raw)
})
if (this.form.id && this.form.id !== 'null') {
formData.set('workId', this.form.id)
}
formData.set('dataType', this.form.dataType)
request({
method: 'POST',
url: this.upload.url, //
data: formData //formData
}).then((res) => {
if (res.code === 200) {
this.$message.success('上传成功')
// this.open = false;
// this.getList();
console.log('查看上传结果:', res)
if (res.data) {
this.form.video = res.data.fileUrl
}
} else {
this.$message.error('上传失败')
}
//fileList
this.fileList = []
})
// this.$refs.uploadFile.submit();
},
/** 查询模板管理列表 */
getList() {
this.loading = true
listTemplateInfo(this.queryParams).then(response => {
this.templateInfoList = response.rows
this.total = response.total
this.loading = false
})
},
//
cancel() {
this.open = false
this.reset()
},
//
reset() {
this.form = {
id: null,
templateName: null,
templateType: null,
price: null,
video: null,
times: null,
remark: null,
sysType: null,
moduleType: 'templateInfo',
reserveOne: null,
reserveTwo: null,
reserveThree: null,
reserveFour: null,
reserveFive: null,
reserveSix: null,
reserveSeven: null,
reserveEight: null,
reserveNine: null
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
this.handleQuery()
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加模板管理'
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.id || this.ids
getTemplateInfo(id).then(response => {
this.form = response.data
this.open = true
this.title = 'Vlog价格配置'
})
},
/** 提交按钮 */
submitForm() {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateTemplateInfo(this.form).then(response => {
this.$modal.msgSuccess('修改成功')
this.open = false
this.getList()
})
} else {
addTemplateInfo(this.form).then(response => {
this.$modal.msgSuccess('新增成功')
this.open = false
this.getList()
})
}
}
})
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids
this.$modal.confirm('是否确认删除模板管理编号为"' + ids + '"的数据项?').then(function() {
return delTemplateInfo(ids)
}).then(() => {
this.getList()
this.$modal.msgSuccess('删除成功')
}).catch(() => {
})
},
/** 导出按钮操作 */
handleExport() {
this.download('godTemplateInfo/templateInfo/export', {
...this.queryParams
}, `templateInfo_${new Date().getTime()}.xlsx`)
}
}
}
</script>

View File

@ -119,7 +119,7 @@
<span>{{ parseTime(scope.row.recordTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" />
<el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button

View File

@ -104,7 +104,7 @@
<span>{{ parseTime(scope.row.captureTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remarks" />
<el-table-column label="备注" align="center" prop="remarks" :show-overflow-tooltip="true"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button

View File

@ -272,8 +272,16 @@ export default {
const dom13 = document.querySelector('.login-form')
dom13.style.marginLeft = '34vw'
break;
case '9405':
document.title = '汉丰湖Vlog短视频应用系统'
this.title = '汉丰湖Vlog短视频应用系统'
loginDom.style.backgroundImage = 'url(/images/vlog.png)'
this.redirect = '/index'
const dom133 = document.querySelector('.login-form')
dom133.style.marginLeft = '34vw'
dom133.style.border = 'none'
break;
default:
document.title = ''
loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'
this.redirect = '/index'

View File

@ -1,6 +1,13 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
size="small"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<!-- <el-form-item label="设备名称" prop="equipName">
<el-input
v-model="queryParams.equipName"
@ -17,7 +24,10 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<el-form-item label="用户名" prop="userName">
<el-form-item
label="用户名"
prop="userName"
>
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名"
@ -25,7 +35,10 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户id" prop="userId">
<el-form-item
label="用户id"
prop="userId"
>
<el-input
v-model="queryParams.userId"
placeholder="请输入用户id"
@ -42,12 +55,24 @@
/>
</el-form-item>-->
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button>
<el-button
icon="el-icon-refresh"
size="mini"
@click="resetQuery"
>重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-row
:gutter="10"
class="mb8"
>
<el-col :span="1.5">
<el-button
type="primary"
@ -68,6 +93,7 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['vlog:video:edit']"
v-show="false"
>修改
</el-button>
</el-col>
@ -93,26 +119,108 @@
v-hasPermi="['vlog:video:export']"
>导出</el-button>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="videoList" @selection-change="handleSelectionChange" border>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="设备名称" align="center" prop="equipName"/>
<el-table-column label="设备id" align="center" prop="equipId"/>
<el-table-column label="用户名" align="center" prop="userName"/>
<el-table-column label="用户id" align="center" prop="userId"/>
<el-table-column label="视频名称" align="center" prop="videoName"/>
<el-table-column label="时间" align="center" prop="videoTime" width="150"/>
<el-table-column label="视频地址" align="center" prop="fileUrl" show-overflow-tooltip/>
<div
class="moving-video-grid"
v-loading="loading"
>
<div
class="moving-video-card"
v-for="item, index in videoList"
:key="index"
>
<video
:src="baseUrl + item.fileUrl"
class="moving-video-img"
controls
/>
<div class="moving-card-info">
<div class="moving-card-title">{{ item.equipName }}</div>
<div class="moving-card-time">
<span style="font-size: 12px;">{{ item.videoTime }}</span>
<el-button
type="text"
icon="el-icon-delete"
style="margin-left: 1rem;"
@click="handleDelete(item)"
v-hasPermi="['vlog:video:remove']"
>删除</el-button>
<el-button
type="text"
icon="el-icon-edit"
style="margin-left: 1rem;"
@click="handleUpdate(item)"
v-hasPermi="['vlog:video:edit']"
>修改</el-button>
</div>
</div>
</div>
</div>
<el-table
v-loading="loading"
:data="videoList"
v-show="false"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
align="center"
/>
<el-table-column
label="设备名称"
align="center"
prop="equipName"
/>
<el-table-column
label="设备id"
align="center"
prop="equipId"
/>
<el-table-column
label="用户名"
align="center"
prop="userName"
/>
<el-table-column
label="用户id"
align="center"
prop="userId"
/>
<el-table-column
label="视频名称"
align="center"
prop="videoName"
/>
<el-table-column
label="时间"
align="center"
prop="videoTime"
width="150"
/>
<!-- <el-table-column label="视频地址" align="center" prop="fileUrl" />-->
<!-- <el-table-column label="图片" align="center" prop="phoneInfo" width="100">
<template slot-scope="scope">
<image-preview :src="scope.row.phoneInfo" :width="50" :height="50"/>
</template>
</el-table-column>-->
<!-- <el-table-column label="数据类型" align="center" prop="dataType" />-->
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
<el-table-column
label="备注"
align="center"
prop="remark"
/>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
@ -150,34 +258,93 @@
/>
<!-- 添加或修改运动视频管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="设备名称" prop="equipName">
<el-input v-model="form.equipName" placeholder="请输入设备名称"/>
<el-dialog
:title="title"
:visible.sync="open"
width="500px"
append-to-body
>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
>
<el-form-item
label="设备名称"
prop="equipName"
>
<el-input
v-model="form.equipName"
placeholder="请输入设备名称"
/>
</el-form-item>
<el-form-item label="设备id" prop="equipId">
<el-input v-model="form.equipId" placeholder="请输入设备id"/>
<el-form-item
label="设备id"
prop="equipId"
>
<el-input
v-model="form.equipId"
placeholder="请输入设备id"
/>
</el-form-item>
<el-form-item label="用户名" prop="userName">
<el-input v-model="form.userName" placeholder="请输入用户名"/>
<el-form-item
label="用户名"
prop="userName"
>
<el-input
v-model="form.userName"
placeholder="请输入用户名"
/>
</el-form-item>
<el-form-item label="用户id" prop="userId">
<el-input v-model="form.userId" placeholder="请输入用户id"/>
<el-form-item
label="用户id"
prop="userId"
>
<el-input
v-model="form.userId"
placeholder="请输入用户id"
/>
</el-form-item>
<el-form-item label="视频名称" prop="videoName">
<el-input v-model="form.videoName" placeholder="请输入视频名称"/>
<el-form-item
label="视频名称"
prop="videoName"
>
<el-input
v-model="form.videoName"
placeholder="请输入视频名称"
/>
</el-form-item>
<el-form-item label="时间" prop="videoTime">
<el-date-picker clearable
v-model="form.videoTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择时间"
style="width: 100%">
<el-form-item
label="视频时间"
prop="videoTime"
>
<el-date-picker
clearable
v-model="form.videoTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择视频时间"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
<el-form-item label="视频地址" prop="fileUrl">
<el-input v-model="form.fileUrl" disabled/>
<el-form-item
label="视频地址"
prop="fileUrl"
>
<el-input v-model="form.fileUrl" />
</el-form-item>
<el-form-item
label="备注"
prop="remark"
>
<el-input
v-model="form.remark"
placeholder="请输入备注"
/>
</el-form-item>
<el-form-item label="视频上传">
<el-upload
class="upload-demo"
ref="uploadFile"
@ -189,8 +356,14 @@
:file-list="fileList"
:auto-upload="true"
>
<el-button size="small" type="primary">上传视频</el-button>
<div slot="tip" class="el-upload__tip">只能上传mp4文件且不超过50M</div>
<el-button
size="small"
type="primary"
>上传视频</el-button>
<div
slot="tip"
class="el-upload__tip"
>只能上传mp4文件且不超过100M</div>
</el-upload>
</el-form-item>
<el-form-item label="备注" prop="remark">
@ -203,13 +376,25 @@
<el-input v-model="form.dataType" placeholder="请输入数据类型" />
</el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<div
slot="footer"
class="dialog-footer"
>
<el-button
type="primary"
@click="submitForm"
> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</el-dialog>
<el-dialog title :visible="isShow" width="600px" @close="closeDialog" class="videoBox">
<el-dialog
title
:visible="isShow"
width="600px"
@close="closeDialog"
class="videoBox"
>
<video
:src="videoUrl"
controls
@ -222,8 +407,8 @@
</template>
<script>
import {listVideo, getVideo, delVideo, addVideo, updateVideo} from "@/api/vlog/video";
import {getToken} from "@/utils/auth";
import { listVideo, getVideo, delVideo, addVideo, updateVideo } from "@/api/vlog/video";
import { getToken } from "@/utils/auth";
import request from "@/utils/request";
const dataType = "vlog"
@ -231,6 +416,7 @@ export default {
name: "Video",
data() {
return {
baseUrl: process.env.VUE_APP_BASE_API,
//
loading: true,
//
@ -271,7 +457,7 @@ export default {
//
upload: {
//
headers: {Authorization: "Bearer " + getToken()},
headers: { Authorization: "Bearer " + getToken() },
url: "/vlog/video/upload/file",
//
imageUrl: "",
@ -470,3 +656,56 @@ export default {
}
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 800px) {
.moving-video-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
.moving-video-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 1600px) {
.moving-video-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media screen and (min-width: 2000px) {
.moving-video-grid {
grid-template-columns: repeat(6, 1fr);
}
}
@media screen and (min-width: 2400px) {
.moving-video-grid {
grid-template-columns: repeat(8, 1fr);
}
}
@media screen and (min-width: 2800px) {
.moving-video-grid {
grid-template-columns: repeat(8, 1fr);
}
}
.moving-video-grid {
display: grid;
gap: 16px;
.moving-video-card {
border-radius: 8px;
box-shadow: 2px 2px 6px #25252525, -2px -2px 2px #14141414;
.moving-video-img {
width: 100%;
aspect-ratio: 1.7;
object-fit: cover;
}
.moving-card-info {
padding: 12px 16px;
.moving-card-title {
}
.moving-card-time {
margin-top: 10px;
}
}
}
}
</style>