朱俊杰
3 years ago
24 changed files with 1321 additions and 15 deletions
@ -0,0 +1,37 @@ |
|||||
|
<?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.genersoft.iot.vmp.storager.dao.DeviceChannelMapper"> |
||||
|
|
||||
|
<!-- 通用查询映射结果 --> |
||||
|
<resultMap id="treeNodeResultMap" type="com.genersoft.iot.vmp.vmanager.bean.DeviceChannelTreeNode"> |
||||
|
<id column="id" property="id"/> |
||||
|
<result column="parentId" property="parentId"/> |
||||
|
<result column="status" property="status"/> |
||||
|
<result column="title" property="title"/> |
||||
|
<result column="value" property="value"/> |
||||
|
<result column="key" property="key"/> |
||||
|
<result column="deviceId" property="deviceId"/> |
||||
|
<result column="channelId" property="channelId"/> |
||||
|
<result column="longitude" property="lng"/> |
||||
|
<result column="latitude" property="lat"/> |
||||
|
</resultMap> |
||||
|
|
||||
|
|
||||
|
<select id="tree" resultMap="treeNodeResultMap"> |
||||
|
SELECT |
||||
|
channelId, |
||||
|
channelId as id, |
||||
|
deviceId, |
||||
|
parentId, |
||||
|
status, |
||||
|
name as title, |
||||
|
channelId as "value", |
||||
|
channelId as "key", |
||||
|
channelId, |
||||
|
longitude, |
||||
|
latitude |
||||
|
from device_channel |
||||
|
where deviceId = #{deviceId} |
||||
|
</select> |
||||
|
|
||||
|
</mapper> |
||||
@ -0,0 +1,12 @@ |
|||||
|
package com.genersoft.iot.vmp.utils; |
||||
|
|
||||
|
import java.util.Arrays; |
||||
|
|
||||
|
public class CollectionUtil { |
||||
|
|
||||
|
public static <T> boolean contains(T[] array, final T element) { |
||||
|
return array != null && Arrays.stream(array).anyMatch((x) -> { |
||||
|
return ObjectUtils.nullSafeEquals(x, element); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,41 @@ |
|||||
|
package com.genersoft.iot.vmp.utils; |
||||
|
|
||||
|
import java.util.Arrays; |
||||
|
|
||||
|
public class ObjectUtils { |
||||
|
public static boolean nullSafeEquals(Object o1, Object o2) { |
||||
|
if (o1 == o2) { |
||||
|
return true; |
||||
|
} else if (o1 != null && o2 != null) { |
||||
|
if (o1.equals(o2)) { |
||||
|
return true; |
||||
|
} else { |
||||
|
return o1.getClass().isArray() && o2.getClass().isArray() && arrayEquals(o1, o2); |
||||
|
} |
||||
|
} else { |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private static boolean arrayEquals(Object o1, Object o2) { |
||||
|
if (o1 instanceof Object[] && o2 instanceof Object[]) { |
||||
|
return Arrays.equals((Object[])((Object[])o1), (Object[])((Object[])o2)); |
||||
|
} else if (o1 instanceof boolean[] && o2 instanceof boolean[]) { |
||||
|
return Arrays.equals((boolean[])((boolean[])o1), (boolean[])((boolean[])o2)); |
||||
|
} else if (o1 instanceof byte[] && o2 instanceof byte[]) { |
||||
|
return Arrays.equals((byte[])((byte[])o1), (byte[])((byte[])o2)); |
||||
|
} else if (o1 instanceof char[] && o2 instanceof char[]) { |
||||
|
return Arrays.equals((char[])((char[])o1), (char[])((char[])o2)); |
||||
|
} else if (o1 instanceof double[] && o2 instanceof double[]) { |
||||
|
return Arrays.equals((double[])((double[])o1), (double[])((double[])o2)); |
||||
|
} else if (o1 instanceof float[] && o2 instanceof float[]) { |
||||
|
return Arrays.equals((float[])((float[])o1), (float[])((float[])o2)); |
||||
|
} else if (o1 instanceof int[] && o2 instanceof int[]) { |
||||
|
return Arrays.equals((int[])((int[])o1), (int[])((int[])o2)); |
||||
|
} else if (o1 instanceof long[] && o2 instanceof long[]) { |
||||
|
return Arrays.equals((long[])((long[])o1), (long[])((long[])o2)); |
||||
|
} else { |
||||
|
return o1 instanceof short[] && o2 instanceof short[] && Arrays.equals((short[]) ((short[]) o1), (short[]) ((short[]) o2)); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,54 @@ |
|||||
|
package com.genersoft.iot.vmp.utils.node; |
||||
|
|
||||
|
import com.fasterxml.jackson.annotation.JsonInclude; |
||||
|
import lombok.Data; |
||||
|
|
||||
|
import java.util.ArrayList; |
||||
|
import java.util.List; |
||||
|
|
||||
|
/** |
||||
|
* 节点基类 |
||||
|
* |
||||
|
*/ |
||||
|
@Data |
||||
|
public class BaseNode<T> implements INode<T> { |
||||
|
|
||||
|
private static final long serialVersionUID = 1L; |
||||
|
|
||||
|
/** |
||||
|
* 主键ID |
||||
|
*/ |
||||
|
protected String id; |
||||
|
|
||||
|
/** |
||||
|
* 父节点ID |
||||
|
*/ |
||||
|
protected String parentId; |
||||
|
|
||||
|
/** |
||||
|
* 子孙节点 |
||||
|
*/ |
||||
|
@JsonInclude(JsonInclude.Include.NON_EMPTY) |
||||
|
protected List<T> children = new ArrayList<T>(); |
||||
|
|
||||
|
/** |
||||
|
* 是否有子孙节点 |
||||
|
*/ |
||||
|
@JsonInclude(JsonInclude.Include.NON_EMPTY) |
||||
|
private Boolean hasChildren; |
||||
|
|
||||
|
/** |
||||
|
* 是否有子孙节点 |
||||
|
* |
||||
|
* @return Boolean |
||||
|
*/ |
||||
|
@Override |
||||
|
public Boolean getHasChildren() { |
||||
|
if (children.size() > 0) { |
||||
|
return true; |
||||
|
} else { |
||||
|
return this.hasChildren; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
package com.genersoft.iot.vmp.utils.node; |
||||
|
|
||||
|
import lombok.Data; |
||||
|
import lombok.EqualsAndHashCode; |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 森林节点类 |
||||
|
* |
||||
|
*/ |
||||
|
@Data |
||||
|
@EqualsAndHashCode(callSuper = false) |
||||
|
public class ForestNode extends BaseNode<ForestNode> { |
||||
|
|
||||
|
private static final long serialVersionUID = 1L; |
||||
|
|
||||
|
/** |
||||
|
* 节点内容 |
||||
|
*/ |
||||
|
private Object content; |
||||
|
|
||||
|
public ForestNode(String id, String parentId, Object content) { |
||||
|
this.id = id; |
||||
|
this.parentId = parentId; |
||||
|
this.content = content; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,68 @@ |
|||||
|
package com.genersoft.iot.vmp.utils.node; |
||||
|
|
||||
|
import com.google.common.collect.ImmutableMap; |
||||
|
import com.google.common.collect.Maps; |
||||
|
|
||||
|
import java.util.ArrayList; |
||||
|
import java.util.List; |
||||
|
import java.util.Map; |
||||
|
|
||||
|
/** |
||||
|
* 森林管理类 |
||||
|
* |
||||
|
* @author smallchill |
||||
|
*/ |
||||
|
public class ForestNodeManager<T extends INode<T>> { |
||||
|
|
||||
|
/** |
||||
|
* 森林的所有节点 |
||||
|
*/ |
||||
|
private final ImmutableMap<String, T> nodeMap; |
||||
|
|
||||
|
/** |
||||
|
* 森林的父节点ID |
||||
|
*/ |
||||
|
private final Map<String, Object> parentIdMap = Maps.newHashMap(); |
||||
|
|
||||
|
public ForestNodeManager(List<T> nodes) { |
||||
|
nodeMap = Maps.uniqueIndex(nodes, INode::getId); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 根据节点ID获取一个节点 |
||||
|
* |
||||
|
* @param id 节点ID |
||||
|
* @return 对应的节点对象 |
||||
|
*/ |
||||
|
public INode<T> getTreeNodeAt(String id) { |
||||
|
if (nodeMap.containsKey(id)) { |
||||
|
return nodeMap.get(id); |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 增加父节点ID |
||||
|
* |
||||
|
* @param parentId 父节点ID |
||||
|
*/ |
||||
|
public void addParentId(String parentId) { |
||||
|
parentIdMap.put(parentId, ""); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取树的根节点(一个森林对应多颗树) |
||||
|
* |
||||
|
* @return 树的根节点集合 |
||||
|
*/ |
||||
|
public List<T> getRoot() { |
||||
|
List<T> roots = new ArrayList<>(); |
||||
|
nodeMap.forEach((key, node) -> { |
||||
|
if (node.getParentId() == null || parentIdMap.containsKey(node.getId())) { |
||||
|
roots.add(node); |
||||
|
} |
||||
|
}); |
||||
|
return roots; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
package com.genersoft.iot.vmp.utils.node; |
||||
|
|
||||
|
import com.genersoft.iot.vmp.utils.CollectionUtil; |
||||
|
|
||||
|
import java.util.List; |
||||
|
|
||||
|
/** |
||||
|
* 森林节点归并类 |
||||
|
* |
||||
|
*/ |
||||
|
public class ForestNodeMerger { |
||||
|
|
||||
|
/** |
||||
|
* 将节点数组归并为一个森林（多棵树）（填充节点的children域） |
||||
|
* 时间复杂度为O(n^2) |
||||
|
* |
||||
|
* @param items 节点域 |
||||
|
* @return 多棵树的根节点集合 |
||||
|
*/ |
||||
|
public static <T extends INode<T>> List<T> merge(List<T> items) { |
||||
|
ForestNodeManager<T> forestNodeManager = new ForestNodeManager<>(items); |
||||
|
items.forEach(forestNode -> { |
||||
|
if (forestNode.getParentId() != null) { |
||||
|
INode<T> node = forestNodeManager.getTreeNodeAt(forestNode.getParentId()); |
||||
|
if (node != null) { |
||||
|
node.getChildren().add(forestNode); |
||||
|
} else { |
||||
|
forestNodeManager.addParentId(forestNode.getId()); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
return forestNodeManager.getRoot(); |
||||
|
} |
||||
|
|
||||
|
public static <T extends INode<T>> List<T> merge(List<T> items, String[] parentIds) { |
||||
|
ForestNodeManager<T> forestNodeManager = new ForestNodeManager<>(items); |
||||
|
items.forEach(forestNode -> { |
||||
|
if (forestNode.getParentId() != null) { |
||||
|
INode<T> node = forestNodeManager.getTreeNodeAt(forestNode.getParentId()); |
||||
|
if (CollectionUtil.contains(parentIds, forestNode.getId())){ |
||||
|
forestNodeManager.addParentId(forestNode.getId()); |
||||
|
} else { |
||||
|
if (node != null){ |
||||
|
node.getChildren().add(forestNode); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
return forestNodeManager.getRoot(); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
package com.genersoft.iot.vmp.utils.node; |
||||
|
|
||||
|
import java.io.Serializable; |
||||
|
import java.util.List; |
||||
|
|
||||
|
/** |
||||
|
* |
||||
|
* 节点 |
||||
|
*/ |
||||
|
public interface INode<T> extends Serializable { |
||||
|
|
||||
|
/** |
||||
|
* 主键 |
||||
|
* |
||||
|
* @return String |
||||
|
*/ |
||||
|
String getId(); |
||||
|
|
||||
|
/** |
||||
|
* 父主键 |
||||
|
* |
||||
|
* @return String |
||||
|
*/ |
||||
|
String getParentId(); |
||||
|
|
||||
|
/** |
||||
|
* 子孙节点 |
||||
|
* |
||||
|
* @return List<T> |
||||
|
*/ |
||||
|
List<T> getChildren(); |
||||
|
|
||||
|
/** |
||||
|
* 是否有子孙节点 |
||||
|
* |
||||
|
* @return Boolean |
||||
|
*/ |
||||
|
default Boolean getHasChildren() { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
package com.genersoft.iot.vmp.utils.node; |
||||
|
|
||||
|
import lombok.Data; |
||||
|
import lombok.EqualsAndHashCode; |
||||
|
|
||||
|
/** |
||||
|
* 树型节点类 |
||||
|
* |
||||
|
*/ |
||||
|
@Data |
||||
|
@EqualsAndHashCode(callSuper = false) |
||||
|
public class TreeNode extends BaseNode<TreeNode> { |
||||
|
|
||||
|
private static final long serialVersionUID = 1L; |
||||
|
|
||||
|
private String title; |
||||
|
|
||||
|
private String key; |
||||
|
|
||||
|
private String value; |
||||
|
} |
||||
@ -0,0 +1,50 @@ |
|||||
|
package com.genersoft.iot.vmp.vmanager.bean; |
||||
|
|
||||
|
import com.fasterxml.jackson.annotation.JsonInclude; |
||||
|
import com.genersoft.iot.vmp.gb28181.bean.DeviceChannel; |
||||
|
import com.genersoft.iot.vmp.utils.node.INode; |
||||
|
import io.swagger.annotations.ApiModel; |
||||
|
import lombok.Data; |
||||
|
import lombok.EqualsAndHashCode; |
||||
|
|
||||
|
import java.util.ArrayList; |
||||
|
import java.util.List; |
||||
|
|
||||
|
@Data |
||||
|
@EqualsAndHashCode(callSuper = true) |
||||
|
@ApiModel(value = "DeviceChannelTree对象", description = "DeviceChannelTree对象") |
||||
|
public class DeviceChannelTree extends DeviceChannel implements INode<DeviceChannelTree> { |
||||
|
private static final long serialVersionUID = 1L; |
||||
|
|
||||
|
/** |
||||
|
* 主键ID |
||||
|
*/ |
||||
|
private String id; |
||||
|
|
||||
|
/** |
||||
|
* 父节点ID |
||||
|
*/ |
||||
|
private String parentId; |
||||
|
|
||||
|
private String parentName; |
||||
|
|
||||
|
/** |
||||
|
* 子孙节点 |
||||
|
*/ |
||||
|
@JsonInclude(JsonInclude.Include.NON_EMPTY) |
||||
|
private List<DeviceChannelTree> children; |
||||
|
|
||||
|
/** |
||||
|
* 是否有子孙节点 |
||||
|
*/ |
||||
|
@JsonInclude(JsonInclude.Include.NON_EMPTY) |
||||
|
private Boolean hasChildren; |
||||
|
|
||||
|
@Override |
||||
|
public List<DeviceChannelTree> getChildren() { |
||||
|
if (this.children == null) { |
||||
|
this.children = new ArrayList<>(); |
||||
|
} |
||||
|
return this.children; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
package com.genersoft.iot.vmp.vmanager.bean; |
||||
|
|
||||
|
import com.genersoft.iot.vmp.utils.node.TreeNode; |
||||
|
import lombok.Data; |
||||
|
import lombok.EqualsAndHashCode; |
||||
|
|
||||
|
@Data |
||||
|
@EqualsAndHashCode(callSuper = true) |
||||
|
public class DeviceChannelTreeNode extends TreeNode { |
||||
|
|
||||
|
private Integer status; |
||||
|
|
||||
|
private String deviceId; |
||||
|
|
||||
|
private String channelId; |
||||
|
|
||||
|
private Double lng; |
||||
|
|
||||
|
private Double lat; |
||||
|
} |
||||
@ -1,32 +1,35 @@ |
|||||
package com.genersoft.iot.vmp.vmanager.bean; |
package com.genersoft.iot.vmp.vmanager.bean; |
||||
|
|
||||
|
import lombok.AllArgsConstructor; |
||||
|
import lombok.Data; |
||||
|
import lombok.NoArgsConstructor; |
||||
|
|
||||
|
@Data |
||||
|
@NoArgsConstructor |
||||
|
@AllArgsConstructor |
||||
public class WVPResult<T> { |
public class WVPResult<T> { |
||||
|
|
||||
private int code; |
private int code; |
||||
private String msg; |
private String msg; |
||||
private T data; |
private T data; |
||||
|
|
||||
public int getCode() { |
private static final Integer SUCCESS = 200; |
||||
return code; |
private static final Integer FAILED = 400; |
||||
} |
|
||||
|
|
||||
public void setCode(int code) { |
public static <T> WVPResult<T> Data(T t, String msg) { |
||||
this.code = code; |
return new WVPResult<>(SUCCESS, msg, t); |
||||
} |
} |
||||
|
|
||||
public String getMsg() { |
public static <T> WVPResult<T> Data(T t) { |
||||
return msg; |
return Data(t, "成功"); |
||||
} |
} |
||||
|
|
||||
public void setMsg(String msg) { |
public static <T> WVPResult<T> fail(int code, String msg) { |
||||
this.msg = msg; |
return new WVPResult<>(code, msg, null); |
||||
} |
} |
||||
|
|
||||
public T getData() { |
public static <T> WVPResult<T> fail(String msg) { |
||||
return data; |
return fail(FAILED, msg); |
||||
} |
} |
||||
|
|
||||
public void setData(T data) { |
|
||||
this.data = data; |
|
||||
} |
|
||||
} |
} |
||||
|
|||||
@ -0,0 +1,19 @@ |
|||||
|
import axios from 'axios'; |
||||
|
|
||||
|
export const tree = (deviceId) => { |
||||
|
return axios({ |
||||
|
url: `/api/device/query/${deviceId}/tree`, |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const deviceList = (page, count) => { |
||||
|
return axios({ |
||||
|
method: 'get', |
||||
|
url:`/api/device/query/devices`, |
||||
|
params: { |
||||
|
page, |
||||
|
count |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,70 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-tree :data="channelList" :props="props" @node-click="sendDevicePush"> |
||||
|
<span slot-scope="{ node }"> |
||||
|
<span v-if="node.isLeaf"> |
||||
|
<i class="el-icon-video-camera" :style="{color:node.disabled==1?'#67C23A':'#F56C6C'}"></i> |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
<i class="el-icon-folder"></i> |
||||
|
</span> |
||||
|
<span> |
||||
|
{{ node.label }} |
||||
|
</span> |
||||
|
</span> |
||||
|
</el-tree> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import ChannelTreeItem from "@/components/channelTreeItem" |
||||
|
import {tree} from '@/api/deviceApi' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
ChannelTreeItem, |
||||
|
}, |
||||
|
props:{ |
||||
|
device: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
loading: false, |
||||
|
channelList: [], |
||||
|
props: { |
||||
|
label: 'title', |
||||
|
children: 'children', |
||||
|
isLeaf: 'hasChildren', |
||||
|
disabled: 'status' |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
this.leafs = [] |
||||
|
this.getTree() |
||||
|
}, |
||||
|
methods: { |
||||
|
getTree() { |
||||
|
this.loading = true |
||||
|
var that = this |
||||
|
tree(this.device.deviceId).then(function (res) { |
||||
|
console.log(res.data.data); |
||||
|
that.channelList = res.data.data; |
||||
|
that.loading = false; |
||||
|
}).catch(function (error) { |
||||
|
console.log(error); |
||||
|
that.loading = false; |
||||
|
}); |
||||
|
}, |
||||
|
sendDevicePush(c) { |
||||
|
if(c.hasChildren) return |
||||
|
this.$emit('sendDevicePush',c) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,74 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<!-- <div :index="item.key" v-for="(item,i) in list" :key="i+'-'"> |
||||
|
<el-submenu v-if="item.hasChildren"> |
||||
|
<template slot="title"> |
||||
|
<i class="el-icon-video-camera"></i> |
||||
|
<span slot="title">{{item.title || item.deviceId}}</span> |
||||
|
</template> |
||||
|
<channel-list :list="item.children" @sendDevicePush="sendDevicePush"></channel-list> |
||||
|
</el-submenu> |
||||
|
<el-menu-item v-else :index="item.key" @click="sendDevicePush(item)"> |
||||
|
<template slot="title" > |
||||
|
<i class="el-icon-switch-button" :style="{color:item.status==1?'#67C23A':'#F56C6C'}"></i> |
||||
|
<span slot="title">{{item.title}}</span> |
||||
|
</template> |
||||
|
</el-menu-item> |
||||
|
</div> --> |
||||
|
<div > |
||||
|
<template v-if="!item.hasChildren"> |
||||
|
<el-menu-item :index="item.key" @click="sendDevicePush(item)"> |
||||
|
<i class="el-icon-video-camera" :style="{color:item.status==1?'#67C23A':'#F56C6C'}"></i> |
||||
|
{{item.title}} |
||||
|
</el-menu-item> |
||||
|
</template> |
||||
|
|
||||
|
<el-submenu v-else :index="item.key"> |
||||
|
<template slot="title" > |
||||
|
<i class="el-icon-location-outline"></i> |
||||
|
{{item.title}} |
||||
|
</template> |
||||
|
|
||||
|
<template v-for="child in item.children"> |
||||
|
<channel-item |
||||
|
v-if="child.hasChildren" |
||||
|
:item="child" |
||||
|
:key="child.key" |
||||
|
@sendDevicePush="sendDevicePush"/> |
||||
|
<el-menu-item v-else :key="child.key" :index="child.key" @click="sendDevicePush(child)"> |
||||
|
<i class="el-icon-video-camera" :style="{color:child.status==1?'#67C23A':'#F56C6C'}"></i> |
||||
|
{{child.title}} |
||||
|
</el-menu-item> |
||||
|
</template> |
||||
|
</el-submenu> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name:'ChannelItem', |
||||
|
props:{ |
||||
|
list:Array, |
||||
|
channelId: String, |
||||
|
item: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
channelId(val) { |
||||
|
console.log(val); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
sendDevicePush(c) { |
||||
|
this.$emit('sendDevicePush',c) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,317 @@ |
|||||
|
<template> |
||||
|
<div :id="'jessibuca'+idx" style="width: 100%; height: 100%"> |
||||
|
<div :id="'container'+idx" ref="container" style="width: 100%; height: 100%; background-color: #000" @dblclick="fullscreenSwich"> |
||||
|
<div class="buttons-box" :id="'buttonsBox'+idx"> |
||||
|
<div class="buttons-box-left"> |
||||
|
<i v-if="!playing" class="iconfont icon-play jessibuca-btn" @click="playBtnClick"></i> |
||||
|
<i v-if="playing" class="iconfont icon-pause jessibuca-btn" @click="pause"></i> |
||||
|
<i class="iconfont icon-stop jessibuca-btn" @click="destroyButton"></i> |
||||
|
<i v-if="isNotMute" class="iconfont icon-audio-high jessibuca-btn" @click="jessibuca.mute()"></i> |
||||
|
<i v-if="!isNotMute" class="iconfont icon-audio-mute jessibuca-btn" @click="jessibuca.cancelMute()"></i> |
||||
|
</div> |
||||
|
<div class="buttons-box-right"> |
||||
|
<span class="jessibuca-btn">{{kBps}} kb/s</span> |
||||
|
<!-- <i class="iconfont icon-file-record1 jessibuca-btn"></i>--> |
||||
|
<!-- <i class="iconfont icon-xiangqing2 jessibuca-btn" ></i>--> |
||||
|
<i class="iconfont icon-camera1196054easyiconnet jessibuca-btn" @click="screenshot" style="font-size: 1rem !important"></i> |
||||
|
<i class="iconfont icon-shuaxin11 jessibuca-btn" @click="playBtnClick"></i> |
||||
|
<i v-if="!fullscreen" class="iconfont icon-weibiaoti10 jessibuca-btn" @click="fullscreenSwich"></i> |
||||
|
<i v-if="fullscreen" class="iconfont icon-weibiaoti11 jessibuca-btn" @click="fullscreenSwich"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'jessibuca', |
||||
|
data() { |
||||
|
return { |
||||
|
jessibuca: null, |
||||
|
playing: false, |
||||
|
isNotMute: false, |
||||
|
quieting: false, |
||||
|
fullscreen: false, |
||||
|
loaded: false, // mute |
||||
|
speed: 0, |
||||
|
performance: "", // 工作情况 |
||||
|
kBps: 0, |
||||
|
btnDom: null, |
||||
|
videoInfo: null, |
||||
|
volume: 1, |
||||
|
rotate: 0, |
||||
|
vod: true, // 点播 |
||||
|
forceNoOffscreen: false, |
||||
|
}; |
||||
|
}, |
||||
|
props: ['videoUrl', 'error', 'hasAudio', 'height','idx'], |
||||
|
mounted () { |
||||
|
window.onerror = (msg) => { |
||||
|
// console.error(msg) |
||||
|
}; |
||||
|
let paramUrl = decodeURIComponent(this.$route.params.url) |
||||
|
this.$nextTick(() =>{ |
||||
|
let dom = document.getElementById("container"+this.idx); |
||||
|
// dom.style.height = (9/16 ) * dom.clientWidth + "px" |
||||
|
if (typeof (this.videoUrl) == "undefined") { |
||||
|
this.videoUrl = paramUrl; |
||||
|
} |
||||
|
this.btnDom = document.getElementById("buttonsBox"+this.idx); |
||||
|
console.log("初始化时的地址为: " + this.videoUrl) |
||||
|
this.play(this.videoUrl) |
||||
|
}) |
||||
|
}, |
||||
|
watch:{ |
||||
|
videoUrl(newData, oldData){ |
||||
|
this.play(newData) |
||||
|
}, |
||||
|
immediate:true |
||||
|
}, |
||||
|
methods: { |
||||
|
create(){ |
||||
|
let options = {}; |
||||
|
console.log(this.$refs.container) |
||||
|
console.log("hasAudio " + !!this.hasAudio) |
||||
|
|
||||
|
this.jessibuca = new window.Jessibuca(Object.assign( |
||||
|
{ |
||||
|
container: this.$refs.container, |
||||
|
videoBuffer: 0.2, // 最大缓冲时长，单位秒 |
||||
|
isResize: true, |
||||
|
decoder: "./static/js/jessibuca/index.js", |
||||
|
// text: "WVP-PRO", |
||||
|
// background: "bg.jpg", |
||||
|
loadingText: "加载中", |
||||
|
hasAudio: !!this.hasAudio, |
||||
|
debug: false, |
||||
|
timeout:5, |
||||
|
supportDblclickFullscreen: false, // 是否支持屏幕的双击事件，触发全屏，取消全屏事件。 |
||||
|
operateBtns: { |
||||
|
fullscreen: false, |
||||
|
screenshot: false, |
||||
|
play: false, |
||||
|
audio: false, |
||||
|
}, |
||||
|
record: "record", |
||||
|
vod: this.vod, |
||||
|
forceNoOffscreen: this.forceNoOffscreen, |
||||
|
isNotMute: this.isNotMute, |
||||
|
}, |
||||
|
options |
||||
|
)); |
||||
|
|
||||
|
let _this = this; |
||||
|
this.jessibuca.on("load", function () { |
||||
|
console.log("on load init"); |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("log", function (msg) { |
||||
|
console.log("on log", msg); |
||||
|
}); |
||||
|
this.jessibuca.on("record", function (msg) { |
||||
|
console.log("on record:", msg); |
||||
|
}); |
||||
|
this.jessibuca.on("pause", function () { |
||||
|
_this.playing = false; |
||||
|
}); |
||||
|
this.jessibuca.on("play", function () { |
||||
|
_this.playing = true; |
||||
|
}); |
||||
|
this.jessibuca.on("fullscreen", function (msg) { |
||||
|
console.log("on fullscreen", msg); |
||||
|
_this.fullscreen = msg |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("mute", function (msg) { |
||||
|
console.log("on mute", msg); |
||||
|
_this.isNotMute = !msg; |
||||
|
}); |
||||
|
this.jessibuca.on("audioInfo", function (msg) { |
||||
|
// console.log("audioInfo", msg); |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("videoInfo", function (msg) { |
||||
|
this.videoInfo = msg; |
||||
|
// console.log("videoInfo", msg); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("bps", function (bps) { |
||||
|
// console.log('bps', bps); |
||||
|
|
||||
|
}); |
||||
|
let _ts = 0; |
||||
|
this.jessibuca.on("timeUpdate", function (ts) { |
||||
|
// console.log('timeUpdate,old,new,timestamp', _ts, ts, ts - _ts); |
||||
|
_ts = ts; |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("videoInfo", function (info) { |
||||
|
console.log("videoInfo", info); |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("error", (error) =>{ |
||||
|
console.log("error", error); |
||||
|
this.pause() |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on("timeout", ()=> { |
||||
|
console.log("timeout"); |
||||
|
// this.pause() |
||||
|
this.play(this.videoUrl) |
||||
|
}); |
||||
|
|
||||
|
this.jessibuca.on('start', function () { |
||||
|
console.log('start'); |
||||
|
}) |
||||
|
|
||||
|
this.jessibuca.on("performance", function (performance) { |
||||
|
let show = "卡顿"; |
||||
|
if (performance === 2) { |
||||
|
show = "非常流畅"; |
||||
|
} else if (performance === 1) { |
||||
|
show = "流畅"; |
||||
|
} |
||||
|
_this.performance = show; |
||||
|
}); |
||||
|
this.jessibuca.on('buffer', function (buffer) { |
||||
|
// console.log('buffer', buffer); |
||||
|
}) |
||||
|
|
||||
|
this.jessibuca.on('stats', function (stats) { |
||||
|
// console.log('stats', stats); |
||||
|
}) |
||||
|
|
||||
|
this.jessibuca.on('kBps', function (kBps) { |
||||
|
_this.kBps = Math.round(kBps); |
||||
|
}); |
||||
|
|
||||
|
// 显示时间戳 PTS |
||||
|
this.jessibuca.on('videoFrame', function () { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
// |
||||
|
this.jessibuca.on('metadata', function () { |
||||
|
|
||||
|
}); |
||||
|
}, |
||||
|
playBtnClick: function (event){ |
||||
|
this.play(this.videoUrl) |
||||
|
}, |
||||
|
play: function (url) { |
||||
|
console.log(url) |
||||
|
|
||||
|
if (this.jessibuca) { |
||||
|
this.destroy(); |
||||
|
} |
||||
|
if(!url){ |
||||
|
return |
||||
|
} |
||||
|
this.create(); |
||||
|
this.jessibuca.on("play", () => { |
||||
|
this.playing = true; |
||||
|
this.loaded = true; |
||||
|
this.quieting = this.jessibuca.quieting; |
||||
|
}); |
||||
|
if (this.jessibuca.hasLoaded()) { |
||||
|
this.jessibuca.play(url); |
||||
|
} else { |
||||
|
this.jessibuca.on("load", () => { |
||||
|
console.log("load 播放") |
||||
|
this.jessibuca.play(url); |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
pause: function () { |
||||
|
if (this.jessibuca) { |
||||
|
this.jessibuca.pause(); |
||||
|
} |
||||
|
this.playing = false; |
||||
|
this.err = ""; |
||||
|
this.performance = ""; |
||||
|
}, |
||||
|
destroy: function () { |
||||
|
if (this.jessibuca) { |
||||
|
this.jessibuca.destroy(); |
||||
|
} |
||||
|
if (document.getElementById("buttonsBox"+this.idx) == null) { |
||||
|
document.getElementById("container"+this.idx).appendChild(this.btnDom) |
||||
|
} |
||||
|
this.jessibuca = null; |
||||
|
this.playing = false; |
||||
|
this.err = ""; |
||||
|
this.performance = ""; |
||||
|
|
||||
|
}, |
||||
|
eventcallbacK: function(type, message) { |
||||
|
// console.log("player 事件回调") |
||||
|
// console.log(type) |
||||
|
// console.log(message) |
||||
|
}, |
||||
|
fullscreenSwich: function (){ |
||||
|
let isFull = this.isFullscreen() |
||||
|
this.jessibuca.setFullscreen(!isFull) |
||||
|
this.fullscreen = !isFull; |
||||
|
}, |
||||
|
isFullscreen: function (){ |
||||
|
return document.fullscreenElement || |
||||
|
document.msFullscreenElement || |
||||
|
document.mozFullScreenElement || |
||||
|
document.webkitFullscreenElement || false; |
||||
|
}, |
||||
|
resize(){ |
||||
|
this.jessibuca.resize() |
||||
|
}, |
||||
|
screenshot(){ |
||||
|
this.jessibuca.screenshot('截图','png',0.5) |
||||
|
// let base64 = this.jessibuca.screenshot("shot","jpeg",0.5,'base64') |
||||
|
// this.$emit('screenshot',base64) |
||||
|
}, |
||||
|
destroyButton() { |
||||
|
this.$emit('destroy', this.idx) |
||||
|
this.destroy() |
||||
|
} |
||||
|
}, |
||||
|
destroyed() { |
||||
|
if (this.jessibuca) { |
||||
|
this.jessibuca.destroy(); |
||||
|
} |
||||
|
this.playing = false; |
||||
|
this.loaded = false; |
||||
|
this.performance = ""; |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.buttons-box{ |
||||
|
width: 100%; |
||||
|
height: 28px; |
||||
|
background-color: rgba(43, 51, 63, 0.7); |
||||
|
position: absolute; |
||||
|
display: -webkit-box; |
||||
|
display: -ms-flexbox; |
||||
|
display: flex; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
user-select: none; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.jessibuca-btn{ |
||||
|
width: 20px; |
||||
|
color: rgb(255, 255, 255); |
||||
|
line-height: 27px; |
||||
|
margin: 0px 10px; |
||||
|
padding: 0px 2px; |
||||
|
cursor: pointer; |
||||
|
text-align: center; |
||||
|
font-size: 0.8rem !important; |
||||
|
} |
||||
|
.buttons-box-right { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,357 @@ |
|||||
|
<template> |
||||
|
<div id="devicePosition" style="height: 100%"> |
||||
|
<el-container style="height: 100%"> |
||||
|
<el-header> |
||||
|
<uiHeader></uiHeader> |
||||
|
</el-header> |
||||
|
<el-container v-loading="loading" element-loading-text="拼命加载中"> |
||||
|
<el-aside width="300px" style="background-color: #ffffff"> |
||||
|
<div style="text-align: center;padding-top: 20px;">设备列表</div> |
||||
|
<el-menu v-loading="loading"> |
||||
|
<el-submenu v-for="device in deviceList" :key="device.deviceId" :index="device.deviceId" @click="sendDevicePush(item)"> |
||||
|
<template slot="title" > |
||||
|
<i class="el-icon-location-outline"></i> |
||||
|
{{device.name}} |
||||
|
</template> |
||||
|
<ChannelTree :device="device" @sendDevicePush="sendDevicePush"></ChannelTree> |
||||
|
</el-submenu> |
||||
|
</el-menu> |
||||
|
</el-aside> |
||||
|
<el-container> |
||||
|
<!-- <LivePlay></LivePlay> --> |
||||
|
<el-header height="40px" style="text-align: left;font-size: 17px;line-height: 40px;"> |
||||
|
分屏: |
||||
|
<i class="el-icon-full-screen btn" :class="{active:spilt==1}" @click="spilt=1"/> |
||||
|
<i class="el-icon-menu btn" :class="{active:spilt==4}" @click="spilt=4"/> |
||||
|
<i class="el-icon-s-grid btn" :class="{active:spilt==9}" @click="spilt=9"/> |
||||
|
</el-header> |
||||
|
<el-main> |
||||
|
<div style="width: 100%;height: calc( 100vh - 110px );display: flex;flex-wrap: wrap;background-color: #000;"> |
||||
|
<div v-for="i in spilt" :key="i" class="play-box" |
||||
|
:style="liveStyle" :class="{redborder:playerIdx == (i-1)}" |
||||
|
@click="playerIdx = (i-1)" |
||||
|
> |
||||
|
<div v-if="!videoUrl[i-1]" style="color: #ffffff;font-size: 30px;font-weight: bold;">{{i}}</div> |
||||
|
<player v-else :ref="'player'+i" :videoUrl="videoUrl[i-1]" fluent autoplay :height="true" |
||||
|
:idx="'player'+i" @screenshot="shot" @destroy="destroy"></player> |
||||
|
<!-- <player v-else ref="'player'+i" :idx="'player'+i" :visible.sync="showVideoDialog" :videoUrl="videoUrl[i-1]" :height="true" :hasAudio="hasAudio" fluent autoplay live ></player> --> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uiHeader from "./UiHeader.vue"; |
||||
|
import player from './jessibuca.vue' |
||||
|
import ChannelTree from './channelTree.vue' |
||||
|
|
||||
|
export default { |
||||
|
name: "live", |
||||
|
components: { |
||||
|
uiHeader, player, ChannelTree |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
showVideoDialog: true, |
||||
|
hasAudio: false, |
||||
|
videoUrl:[''], |
||||
|
spilt:1,//分屏 |
||||
|
playerIdx:0,//激活播放器 |
||||
|
|
||||
|
deviceList: [], //设备列表 |
||||
|
currentDevice: {}, //当前操作设备对象 |
||||
|
|
||||
|
videoComponentList: [], |
||||
|
updateLooper: 0, //数据刷新轮训标志 |
||||
|
currentDeviceChannelsLenth:0, |
||||
|
winHeight: window.innerHeight - 200, |
||||
|
currentPage:1, |
||||
|
count:15, |
||||
|
total:0, |
||||
|
getDeviceListLoading: false, |
||||
|
|
||||
|
//channel |
||||
|
searchSrt: "", |
||||
|
channelType: "", |
||||
|
online: "", |
||||
|
channelTotal:0, |
||||
|
deviceChannelList:[], |
||||
|
loading:false |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.initData(); |
||||
|
|
||||
|
}, |
||||
|
created(){ |
||||
|
this.checkPlayByParam() |
||||
|
}, |
||||
|
|
||||
|
computed:{ |
||||
|
liveStyle(){ |
||||
|
if(this.spilt==1){ |
||||
|
return {width:'100%',height:'100%'} |
||||
|
}else if(this.spilt==4){ |
||||
|
return {width:'49%',height:'49%'} |
||||
|
}else if(this.spilt==9){ |
||||
|
return {width:'32%',height:'32%'} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
spilt(newValue){ |
||||
|
console.log("切换画幅;"+newValue) |
||||
|
let that = this |
||||
|
for (let i = 1; i <= newValue; i++) { |
||||
|
if(!that.$refs['player'+i]){ |
||||
|
continue |
||||
|
} |
||||
|
this.$nextTick(()=>{ |
||||
|
if(that.$refs['player'+i] instanceof Array){ |
||||
|
that.$refs['player'+i][0].resize() |
||||
|
}else { |
||||
|
that.$refs['player'+i].resize() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
window.localStorage.setItem('split',newValue) |
||||
|
}, |
||||
|
'$route.fullPath':'checkPlayByParam' |
||||
|
}, |
||||
|
destroyed() { |
||||
|
clearTimeout(this.updateLooper); |
||||
|
}, |
||||
|
methods: { |
||||
|
initData: function () { |
||||
|
this.getDeviceList(); |
||||
|
|
||||
|
}, |
||||
|
destroy(idx) { |
||||
|
console.log(idx); |
||||
|
this.clear(idx.substring(idx.length-1)) |
||||
|
}, |
||||
|
getDeviceList: function() { |
||||
|
let that = this; |
||||
|
this.$axios({ |
||||
|
method: 'get', |
||||
|
url:`/api/device/query/devices`, |
||||
|
params: { |
||||
|
page: that.currentPage, |
||||
|
count: that.count |
||||
|
} |
||||
|
}).then(function (res) { |
||||
|
console.log(res.data.list); |
||||
|
that.total = res.data.total; |
||||
|
|
||||
|
that.deviceList = res.data.list.map(item=>{return {deviceChannelList:[],...item}}); |
||||
|
that.getDeviceListLoading = false; |
||||
|
}).catch(function (error) { |
||||
|
console.log(error); |
||||
|
that.getDeviceListLoading = false; |
||||
|
}); |
||||
|
}, |
||||
|
//通知设备上传媒体流 |
||||
|
sendDevicePush: function (itemData) { |
||||
|
if(itemData.status===0){ |
||||
|
this.$message.error('设备离线!'); |
||||
|
return |
||||
|
} |
||||
|
this.save(itemData) |
||||
|
let deviceId = itemData.deviceId; |
||||
|
// this.isLoging = true; |
||||
|
let channelId = itemData.channelId; |
||||
|
console.log("通知设备推流1：" + deviceId + " : " + channelId ); |
||||
|
let idxTmp = this.playerIdx |
||||
|
let that = this; |
||||
|
this.loading = true |
||||
|
this.$axios({ |
||||
|
method: 'get', |
||||
|
url: '/api/play/start/' + deviceId + '/' + channelId |
||||
|
}).then(function (res) { |
||||
|
// that.isLoging = false; |
||||
|
console.log('=====----=====') |
||||
|
console.log(res) |
||||
|
if (res.data.code == 0 && res.data.data) { |
||||
|
itemData.playUrl = res.data.data.httpsFlv |
||||
|
that.setPlayUrl(res.data.data.ws_flv,idxTmp) |
||||
|
}else { |
||||
|
that.$message.error(res.data.msg); |
||||
|
} |
||||
|
}).catch(function (e) { |
||||
|
}).finally(()=>{ |
||||
|
that.loading = false |
||||
|
}); |
||||
|
}, |
||||
|
setPlayUrl(url,idx){ |
||||
|
this.$set(this.videoUrl,idx,url) |
||||
|
let _this = this |
||||
|
setTimeout(()=>{ |
||||
|
window.localStorage.setItem('videoUrl',JSON.stringify(_this.videoUrl)) |
||||
|
},100) |
||||
|
|
||||
|
}, |
||||
|
checkPlayByParam(){ |
||||
|
let {deviceId,channelId} = this.$route.query |
||||
|
if(deviceId && channelId){ |
||||
|
this.sendDevicePush({deviceId,channelId}) |
||||
|
} |
||||
|
}, |
||||
|
convertImageToCanvas(image) { |
||||
|
var canvas = document.createElement("canvas"); |
||||
|
canvas.width = image.width; |
||||
|
canvas.height = image.height; |
||||
|
canvas.getContext("2d").drawImage(image, 0, 0); |
||||
|
return canvas; |
||||
|
}, |
||||
|
shot(e){ |
||||
|
// console.log(e) |
||||
|
// send({code:'image',data:e}) |
||||
|
var base64ToBlob = function(code) { |
||||
|
let parts = code.split(';base64,'); |
||||
|
let contentType = parts[0].split(':')[1]; |
||||
|
let raw = window.atob(parts[1]); |
||||
|
let rawLength = raw.length; |
||||
|
let uInt8Array = new Uint8Array(rawLength); |
||||
|
for(let i = 0; i < rawLength; ++i) { |
||||
|
uInt8Array[i] = raw.charCodeAt(i); |
||||
|
} |
||||
|
return new Blob([uInt8Array], { |
||||
|
type: contentType |
||||
|
}); |
||||
|
}; |
||||
|
let aLink = document.createElement('a'); |
||||
|
let blob = base64ToBlob(e); //new Blob([content]); |
||||
|
let evt = document.createEvent("HTMLEvents"); |
||||
|
evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为 |
||||
|
aLink.download = '截图'; |
||||
|
aLink.href = URL.createObjectURL(blob); |
||||
|
aLink.click(); |
||||
|
}, |
||||
|
save(item){ |
||||
|
let dataStr = window.localStorage.getItem('playData') || '[]' |
||||
|
let data = JSON.parse(dataStr); |
||||
|
data[this.playerIdx] = item |
||||
|
window.localStorage.setItem('playData',JSON.stringify(data)) |
||||
|
}, |
||||
|
clear(idx) { |
||||
|
let dataStr = window.localStorage.getItem('playData') || '[]' |
||||
|
let data = JSON.parse(dataStr); |
||||
|
data[idx-1] = null; |
||||
|
console.log(data); |
||||
|
window.localStorage.setItem('playData',JSON.stringify(data)) |
||||
|
}, |
||||
|
loadAndPlay(){ |
||||
|
let dataStr = window.localStorage.getItem('playData') || '[]' |
||||
|
let data = JSON.parse(dataStr); |
||||
|
|
||||
|
data.forEach((item,i)=>{ |
||||
|
if(item){ |
||||
|
this.playerIdx = i |
||||
|
this.sendDevicePush(item) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style> |
||||
|
.btn{ |
||||
|
margin: 0 10px; |
||||
|
|
||||
|
} |
||||
|
.btn:hover{ |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
.btn.active{ |
||||
|
color: #409EFF; |
||||
|
|
||||
|
} |
||||
|
.redborder{ |
||||
|
border: 2px solid red !important; |
||||
|
} |
||||
|
.play-box{ |
||||
|
background-color: #000000; |
||||
|
border: 2px solid #505050; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
</style> |
||||
|
<style> |
||||
|
.videoList { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.video-item { |
||||
|
position: relative; |
||||
|
width: 15rem; |
||||
|
height: 10rem; |
||||
|
margin-right: 1rem; |
||||
|
background-color: #000000; |
||||
|
} |
||||
|
|
||||
|
.video-item-img { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: auto; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.video-item-img:after { |
||||
|
content: ""; |
||||
|
display: inline-block; |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
top: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
margin: auto; |
||||
|
width: 3rem; |
||||
|
height: 3rem; |
||||
|
background-image: url("../assets/loading.png"); |
||||
|
background-size: cover; |
||||
|
background-color: #000000; |
||||
|
} |
||||
|
|
||||
|
.video-item-title { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
color: #000000; |
||||
|
background-color: #ffffff; |
||||
|
line-height: 1.5rem; |
||||
|
padding: 0.3rem; |
||||
|
width: 14.4rem; |
||||
|
} |
||||
|
|
||||
|
.baidumap { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: none; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
margin: auto; |
||||
|
} |
||||
|
|
||||
|
/* 去除百度地图版权那行字 和 百度logo */ |
||||
|
.baidumap > .BMap_cpyCtrl { |
||||
|
display: none !important; |
||||
|
} |
||||
|
.baidumap > .anchorBL { |
||||
|
display: none !important; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue