Merge pull request 'feat: 运动视频' (#23) from zhoumingxiu into main

Reviewed-on: http://117.73.11.115:3000/Tony/god-ytr/pulls/23
This commit is contained in:
ming 2024-06-11 14:03:21 +08:00
commit 7c9cbb0f1f
8 changed files with 1166 additions and 0 deletions

View File

@ -0,0 +1,159 @@
package com.god.web.controller.vlog;
import java.io.IOException;
import java.util.List;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson2.JSONObject;
import com.god.common.config.GodConfig;
import com.god.common.utils.file.FileUploadUtils;
import com.god.framework.config.ServerConfig;
import com.god.passenger.species.domain.BjdfVideoManage;
import com.god.web.controller.species.BjdfVideoManageController;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.god.common.annotation.Log;
import com.god.common.core.controller.BaseController;
import com.god.common.core.domain.AjaxResult;
import com.god.common.enums.BusinessType;
import com.god.vlog.domain.VlogVideoManage;
import com.god.vlog.service.IVlogVideoManageService;
import com.god.common.utils.poi.ExcelUtil;
import com.god.common.core.page.TableDataInfo;
import org.springframework.web.multipart.MultipartFile;
/**
* 运动视频管理Controller
*
* @author god
* @date 2024-06-11
*/
@RestController
@RequestMapping("/vlog/video")
public class VlogVideoManageController extends BaseController
{
private static final Logger LOGGER = LoggerFactory.getLogger(VlogVideoManageController.class);
@Autowired
private IVlogVideoManageService vlogVideoManageService;
@Autowired
private ServerConfig serverConfig;
/**
* 查询运动视频管理列表
*/
@PreAuthorize("@ss.hasPermi('vlog:video:list')")
@GetMapping("/list")
public TableDataInfo list(VlogVideoManage vlogVideoManage)
{
startPage();
List<VlogVideoManage> list = vlogVideoManageService.selectVlogVideoManageList(vlogVideoManage);
return getDataTable(list);
}
/**
* 导出运动视频管理列表
*/
@PreAuthorize("@ss.hasPermi('vlog:video:export')")
@Log(title = "运动视频管理", businessType = BusinessType.EXPORT)
@PostMapping("/export")
public void export(HttpServletResponse response, VlogVideoManage vlogVideoManage)
{
List<VlogVideoManage> list = vlogVideoManageService.selectVlogVideoManageList(vlogVideoManage);
ExcelUtil<VlogVideoManage> util = new ExcelUtil<VlogVideoManage>(VlogVideoManage.class);
util.exportExcel(response, list, "运动视频管理数据");
}
/**
* 获取运动视频管理详细信息
*/
@PreAuthorize("@ss.hasPermi('vlog:video:query')")
@GetMapping(value = "/{id}")
public AjaxResult getInfo(@PathVariable("id") String id)
{
return success(vlogVideoManageService.selectVlogVideoManageById(id));
}
/**
* 新增运动视频管理
*/
@PreAuthorize("@ss.hasPermi('vlog:video:add')")
@Log(title = "运动视频管理", businessType = BusinessType.INSERT)
@PostMapping
public AjaxResult add(@RequestBody VlogVideoManage vlogVideoManage)
{
return toAjax(vlogVideoManageService.insertVlogVideoManage(vlogVideoManage));
}
/**
* 修改运动视频管理
*/
@PreAuthorize("@ss.hasPermi('vlog:video:edit')")
@Log(title = "运动视频管理", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult edit(@RequestBody VlogVideoManage vlogVideoManage)
{
return toAjax(vlogVideoManageService.updateVlogVideoManage(vlogVideoManage));
}
/**
* 删除运动视频管理
*/
@PreAuthorize("@ss.hasPermi('vlog:video:remove')")
@Log(title = "运动视频管理", businessType = BusinessType.DELETE)
@DeleteMapping("/{ids}")
public AjaxResult remove(@PathVariable String[] ids)
{
return toAjax(vlogVideoManageService.deleteVlogVideoManageByIds(ids));
}
/**
* 上传文件和维修的基本信息
*
* @param files
*/
@PostMapping("/upload/file")
public AjaxResult upload(List<MultipartFile> files, VlogVideoManage dryadFileInfo) {
String id = dryadFileInfo.getId();
// 上传文件路径
String filePath = GodConfig.getUploadPath();
String fileUrl = "";
// List<String> urls = new ArrayList<String>();
// List<String> fileNames = new ArrayList<String>();
// List<String> newFileNames = new ArrayList<String>();
// List<String> originalFilenames = new ArrayList<String>();
LOGGER.info("--->>查看url的地址{},配置地址{}", filePath, serverConfig.getUrl());
if (files != null && files.size() > 0) {
LOGGER.info("--->>开始上传文件");
for (MultipartFile file1 : files) {
// 上传并返回新文件名称
String fileName = null;
try {
//上传文件
fileName = FileUploadUtils.upload(filePath, file1);
} catch (IOException e) {
e.printStackTrace();
}
LOGGER.info("---->>查看第一次路径" + fileName);
String url = serverConfig.getUrl() + fileName;
LOGGER.info("---->>查看第二次路径" + url);
fileUrl = fileName;
}
}
JSONObject jsonObject = new JSONObject();
jsonObject.put("file_id", id);
jsonObject.put("fileUrl", fileUrl);
return AjaxResult.success(jsonObject);
}
}

View File

@ -0,0 +1,164 @@
package com.god.vlog.domain;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
import com.god.common.annotation.Excel;
import com.god.common.core.domain.BaseEntity;
/**
* 运动视频管理对象 vlog_video_manage
*
* @author god
* @date 2024-06-11
*/
public class VlogVideoManage extends BaseEntity
{
private static final long serialVersionUID = 1L;
/** $column.columnComment */
private String id;
/** 设备名称 */
@Excel(name = "设备名称")
private String equipName;
/** 设备id */
@Excel(name = "设备id")
private String equipId;
/** 用户名 */
@Excel(name = "用户名")
private String userName;
/** 用户id */
@Excel(name = "用户id")
private String userId;
/** 视频名称 */
@Excel(name = "视频名称")
private String videoName;
/** 视频时间 */
@Excel(name = "视频时间")
private String videoTime;
/** 视频地址 */
@Excel(name = "视频地址")
private String fileUrl;
/** 图片 */
@Excel(name = "图片")
private String phoneInfo;
/** 数据类型 */
@Excel(name = "数据类型")
private String dataType;
public void setId(String id)
{
this.id = id;
}
public String getId()
{
return id;
}
public void setEquipName(String equipName)
{
this.equipName = equipName;
}
public String getEquipName()
{
return equipName;
}
public void setEquipId(String equipId)
{
this.equipId = equipId;
}
public String getEquipId()
{
return equipId;
}
public void setUserName(String userName)
{
this.userName = userName;
}
public String getUserName()
{
return userName;
}
public void setUserId(String userId)
{
this.userId = userId;
}
public String getUserId()
{
return userId;
}
public void setVideoName(String videoName)
{
this.videoName = videoName;
}
public String getVideoName()
{
return videoName;
}
public void setVideoTime(String videoTime)
{
this.videoTime = videoTime;
}
public String getVideoTime()
{
return videoTime;
}
public void setFileUrl(String fileUrl)
{
this.fileUrl = fileUrl;
}
public String getFileUrl()
{
return fileUrl;
}
public void setPhoneInfo(String phoneInfo)
{
this.phoneInfo = phoneInfo;
}
public String getPhoneInfo()
{
return phoneInfo;
}
public void setDataType(String dataType)
{
this.dataType = dataType;
}
public String getDataType()
{
return dataType;
}
@Override
public String toString() {
return new ToStringBuilder(this,ToStringStyle.MULTI_LINE_STYLE)
.append("id", getId())
.append("equipName", getEquipName())
.append("equipId", getEquipId())
.append("userName", getUserName())
.append("userId", getUserId())
.append("videoName", getVideoName())
.append("videoTime", getVideoTime())
.append("fileUrl", getFileUrl())
.append("phoneInfo", getPhoneInfo())
.append("dataType", getDataType())
.append("remark", getRemark())
.toString();
}
}

View File

@ -0,0 +1,61 @@
package com.god.vlog.mapper;
import java.util.List;
import com.god.vlog.domain.VlogVideoManage;
/**
* 运动视频管理Mapper接口
*
* @author god
* @date 2024-06-11
*/
public interface VlogVideoManageMapper
{
/**
* 查询运动视频管理
*
* @param id 运动视频管理主键
* @return 运动视频管理
*/
public VlogVideoManage selectVlogVideoManageById(String id);
/**
* 查询运动视频管理列表
*
* @param vlogVideoManage 运动视频管理
* @return 运动视频管理集合
*/
public List<VlogVideoManage> selectVlogVideoManageList(VlogVideoManage vlogVideoManage);
/**
* 新增运动视频管理
*
* @param vlogVideoManage 运动视频管理
* @return 结果
*/
public int insertVlogVideoManage(VlogVideoManage vlogVideoManage);
/**
* 修改运动视频管理
*
* @param vlogVideoManage 运动视频管理
* @return 结果
*/
public int updateVlogVideoManage(VlogVideoManage vlogVideoManage);
/**
* 删除运动视频管理
*
* @param id 运动视频管理主键
* @return 结果
*/
public int deleteVlogVideoManageById(String id);
/**
* 批量删除运动视频管理
*
* @param ids 需要删除的数据主键集合
* @return 结果
*/
public int deleteVlogVideoManageByIds(String[] ids);
}

View File

@ -0,0 +1,61 @@
package com.god.vlog.service;
import java.util.List;
import com.god.vlog.domain.VlogVideoManage;
/**
* 运动视频管理Service接口
*
* @author god
* @date 2024-06-11
*/
public interface IVlogVideoManageService
{
/**
* 查询运动视频管理
*
* @param id 运动视频管理主键
* @return 运动视频管理
*/
public VlogVideoManage selectVlogVideoManageById(String id);
/**
* 查询运动视频管理列表
*
* @param vlogVideoManage 运动视频管理
* @return 运动视频管理集合
*/
public List<VlogVideoManage> selectVlogVideoManageList(VlogVideoManage vlogVideoManage);
/**
* 新增运动视频管理
*
* @param vlogVideoManage 运动视频管理
* @return 结果
*/
public int insertVlogVideoManage(VlogVideoManage vlogVideoManage);
/**
* 修改运动视频管理
*
* @param vlogVideoManage 运动视频管理
* @return 结果
*/
public int updateVlogVideoManage(VlogVideoManage vlogVideoManage);
/**
* 批量删除运动视频管理
*
* @param ids 需要删除的运动视频管理主键集合
* @return 结果
*/
public int deleteVlogVideoManageByIds(String[] ids);
/**
* 删除运动视频管理信息
*
* @param id 运动视频管理主键
* @return 结果
*/
public int deleteVlogVideoManageById(String id);
}

View File

@ -0,0 +1,99 @@
package com.god.vlog.service.impl;
import java.util.List;
import com.god.common.utils.StringUtils;
import com.god.common.utils.uuid.IdUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.god.vlog.mapper.VlogVideoManageMapper;
import com.god.vlog.domain.VlogVideoManage;
import com.god.vlog.service.IVlogVideoManageService;
/**
* 运动视频管理Service业务层处理
*
* @author god
* @date 2024-06-11
*/
@Service
public class VlogVideoManageServiceImpl implements IVlogVideoManageService
{
@Autowired
private VlogVideoManageMapper vlogVideoManageMapper;
/**
* 查询运动视频管理
*
* @param id 运动视频管理主键
* @return 运动视频管理
*/
@Override
public VlogVideoManage selectVlogVideoManageById(String id)
{
return vlogVideoManageMapper.selectVlogVideoManageById(id);
}
/**
* 查询运动视频管理列表
*
* @param vlogVideoManage 运动视频管理
* @return 运动视频管理
*/
@Override
public List<VlogVideoManage> selectVlogVideoManageList(VlogVideoManage vlogVideoManage)
{
return vlogVideoManageMapper.selectVlogVideoManageList(vlogVideoManage);
}
/**
* 新增运动视频管理
*
* @param vlogVideoManage 运动视频管理
* @return 结果
*/
@Override
public int insertVlogVideoManage(VlogVideoManage vlogVideoManage)
{
if (StringUtils.isBlank(vlogVideoManage.getId())){
vlogVideoManage.setId(IdUtils.fastSimpleUUID());
}
return vlogVideoManageMapper.insertVlogVideoManage(vlogVideoManage);
}
/**
* 修改运动视频管理
*
* @param vlogVideoManage 运动视频管理
* @return 结果
*/
@Override
public int updateVlogVideoManage(VlogVideoManage vlogVideoManage)
{
return vlogVideoManageMapper.updateVlogVideoManage(vlogVideoManage);
}
/**
* 批量删除运动视频管理
*
* @param ids 需要删除的运动视频管理主键
* @return 结果
*/
@Override
public int deleteVlogVideoManageByIds(String[] ids)
{
return vlogVideoManageMapper.deleteVlogVideoManageByIds(ids);
}
/**
* 删除运动视频管理信息
*
* @param id 运动视频管理主键
* @return 结果
*/
@Override
public int deleteVlogVideoManageById(String id)
{
return vlogVideoManageMapper.deleteVlogVideoManageById(id);
}
}

View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.god.vlog.mapper.VlogVideoManageMapper">
<resultMap type="VlogVideoManage" id="VlogVideoManageResult">
<result property="id" column="id" />
<result property="equipName" column="equip_name" />
<result property="equipId" column="equip_id" />
<result property="userName" column="user_name" />
<result property="userId" column="user_id" />
<result property="videoName" column="video_name" />
<result property="videoTime" column="video_time" />
<result property="fileUrl" column="file_url" />
<result property="phoneInfo" column="phone_info" />
<result property="dataType" column="data_type" />
<result property="remark" column="remark" />
</resultMap>
<sql id="selectVlogVideoManageVo">
select id, equip_name, equip_id, user_name, user_id, video_name, video_time, file_url, phone_info, data_type, remark from vlog_video_manage
</sql>
<select id="selectVlogVideoManageList" parameterType="VlogVideoManage" resultMap="VlogVideoManageResult">
<include refid="selectVlogVideoManageVo"/>
<where>
<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="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>
<if test="phoneInfo != null and phoneInfo != ''"> and phone_info = #{phoneInfo}</if>
<if test="dataType != null and dataType != ''"> and data_type = #{dataType}</if>
</where>
</select>
<select id="selectVlogVideoManageById" parameterType="String" resultMap="VlogVideoManageResult">
<include refid="selectVlogVideoManageVo"/>
where id = #{id}
</select>
<insert id="insertVlogVideoManage" parameterType="VlogVideoManage">
insert into vlog_video_manage
<trim prefix="(" suffix=")" suffixOverrides=",">
<if test="id != null">id,</if>
<if test="equipName != null">equip_name,</if>
<if test="equipId != null">equip_id,</if>
<if test="userName != null">user_name,</if>
<if test="userId != null">user_id,</if>
<if test="videoName != null">video_name,</if>
<if test="videoTime != null">video_time,</if>
<if test="fileUrl != null">file_url,</if>
<if test="phoneInfo != null">phone_info,</if>
<if test="dataType != null">data_type,</if>
<if test="remark != null">remark,</if>
</trim>
<trim prefix="values (" suffix=")" suffixOverrides=",">
<if test="id != null">#{id},</if>
<if test="equipName != null">#{equipName},</if>
<if test="equipId != null">#{equipId},</if>
<if test="userName != null">#{userName},</if>
<if test="userId != null">#{userId},</if>
<if test="videoName != null">#{videoName},</if>
<if test="videoTime != null">#{videoTime},</if>
<if test="fileUrl != null">#{fileUrl},</if>
<if test="phoneInfo != null">#{phoneInfo},</if>
<if test="dataType != null">#{dataType},</if>
<if test="remark != null">#{remark},</if>
</trim>
</insert>
<update id="updateVlogVideoManage" parameterType="VlogVideoManage">
update vlog_video_manage
<trim prefix="SET" suffixOverrides=",">
<if test="equipName != null">equip_name = #{equipName},</if>
<if test="equipId != null">equip_id = #{equipId},</if>
<if test="userName != null">user_name = #{userName},</if>
<if test="userId != null">user_id = #{userId},</if>
<if test="videoName != null">video_name = #{videoName},</if>
<if test="videoTime != null">video_time = #{videoTime},</if>
<if test="fileUrl != null">file_url = #{fileUrl},</if>
<if test="phoneInfo != null">phone_info = #{phoneInfo},</if>
<if test="dataType != null">data_type = #{dataType},</if>
<if test="remark != null">remark = #{remark},</if>
</trim>
where id = #{id}
</update>
<delete id="deleteVlogVideoManageById" parameterType="String">
delete from vlog_video_manage where id = #{id}
</delete>
<delete id="deleteVlogVideoManageByIds" parameterType="String">
delete from vlog_video_manage where id in
<foreach item="id" collection="array" open="(" separator="," close=")">
#{id}
</foreach>
</delete>
</mapper>

View File

@ -0,0 +1,44 @@
import request from '@/utils/request'
// 查询运动视频管理列表
export function listVideo(query) {
return request({
url: '/vlog/video/list',
method: 'get',
params: query
})
}
// 查询运动视频管理详细
export function getVideo(id) {
return request({
url: '/vlog/video/' + id,
method: 'get'
})
}
// 新增运动视频管理
export function addVideo(data) {
return request({
url: '/vlog/video',
method: 'post',
data: data
})
}
// 修改运动视频管理
export function updateVideo(data) {
return request({
url: '/vlog/video',
method: 'put',
data: data
})
}
// 删除运动视频管理
export function delVideo(id) {
return request({
url: '/vlog/video/' + id,
method: 'delete'
})
}

View File

@ -0,0 +1,476 @@
<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="equipName">
<el-input
v-model="queryParams.equipName"
placeholder="请输入设备名称"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="设备id" prop="equipId">
<el-input
v-model="queryParams.equipId"
placeholder="请输入设备id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<el-form-item label="用户名" prop="userName">
<el-input
v-model="queryParams.userName"
placeholder="请输入用户名"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="用户id" prop="userId">
<el-input
v-model="queryParams.userId"
placeholder="请输入用户id"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="视频名称" prop="videoName">
<el-input
v-model="queryParams.videoName"
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="['vlog:video: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="['vlog:video: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="['vlog:video: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="['vlog:video:export']"
>导出</el-button>
</el-col>-->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="videoList" @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">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['vlog:video:edit']"
>修改
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['vlog:video: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="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>
<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>
<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-date-picker>
</el-form-item>
<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"
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-item label="图片" prop="phoneInfo">
<image-upload v-model="form.phoneInfo"/>
</el-form-item>-->
<!-- <el-form-item label="数据类型" prop="dataType">
<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>
<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 {listVideo, getVideo, delVideo, addVideo, updateVideo} from "@/api/vlog/video";
import {getToken} from "@/utils/auth";
import request from "@/utils/request";
const dataType = "vlog"
export default {
name: "Video",
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
videoList: [],
//
title: "",
//
open: false,
//
queryParams: {
pageNum: 1,
pageSize: 10,
equipName: null,
equipId: null,
userName: null,
userId: null,
videoName: null,
videoTime: null,
fileUrl: null,
phoneInfo: null,
dataType: dataType,
},
//
form: {},
//
rules: {},
fileList: [],
//
upload: {
//
headers: {Authorization: "Bearer " + getToken()},
url: "/vlog/video/upload/file",
//
imageUrl: "",
//
data: {
tableName: "",
linkId: "",
workId: "",
},
},
isShow: false,
videoUrl: '',
baseUrl: process.env.VUE_APP_BASE_API,
};
},
created() {
this.getList();
},
methods: {
/** 查询运动视频管理列表 */
getList() {
this.loading = true;
listVideo(this.queryParams).then(response => {
this.videoList = response.rows;
this.total = response.total;
this.loading = false;
});
},
//
cancel() {
this.open = false;
this.reset();
},
//
reset() {
this.form = {
id: null,
equipName: null,
equipId: null,
userName: null,
userId: null,
videoName: null,
videoTime: null,
fileUrl: null,
phoneInfo: null,
dataType: dataType,
remark: 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
getVideo(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改运动视频";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
updateVideo(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addVideo(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除此数据项?').then(function () {
return delVideo(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
this.download('vlog/video/export', {
...this.queryParams
}, `video_${new Date().getTime()}.xlsx`)
},
//
playVideo(row) {
this.isShow = true
// src
let url1 = row.fileUrl;
// 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.fileUrl = res.data.fileUrl;
}
} else {
this.$message.error("上传失败");
}
//fileList
this.fileList = [];
});
// this.$refs.uploadFile.submit();
},
}
};
</script>