guzijian / wvp-GB28181-pro · Commits

Commit cc220d15263602e40ff8f46f3f8b067469ebaba2

Authored by guzijian
1 parent 705ac5c5
build: skipped

feat: 车载设备新增过滤条件

Inline Side-by-side
Showing 4 changed files with 364 additions and 1 deletions
src/main/java/com/genersoft/iot/vmp/vehicle/service/impl/VehicleDeviceServiceImpl.java
  View file @cc220d1
@@ -45,7 +45,7 @@ public class VehicleDeviceServiceImpl implements VehicleDeviceService { @@ -45,7 +45,7 @@ public class VehicleDeviceServiceImpl implements VehicleDeviceService {
45 } 45 }
46 } 46 }
47 if (StringUtils.isNotEmpty(online)) { 47 if (StringUtils.isNotEmpty(online)) {
48 - list = list.stream().filter(item->!item.getStatus().equals(online)).collect(Collectors.toList()); 48 + list = list.stream().filter(item->item.getStatus().equals(online)).collect(Collectors.toList());
49 } 49 }
50 if (filterOld != null) { 50 if (filterOld != null) {
51 list = list.stream().filter(item->item.getOldDevice().equals(filterOld)).collect(Collectors.toList()); 51 list = list.stream().filter(item->item.getOldDevice().equals(filterOld)).collect(Collectors.toList());
web_src/src/components/common/minhang.vue 0 → 100644
  View file @cc220d1
  1 +<template>
  2 + <div id="minhang" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto">
  3 + <div class="page-header">
  4 + <div class="page-title">
  5 + <el-divider direction="vertical"></el-divider>
  6 + 设备列表
  7 + </div>
  8 + </div>
  9 + <el-form :inline="true" ref="form">
  10 + <el-form-item label="设备类型">
  11 + <el-select v-model="filterOld" clearable placeholder="请选择" @change="handlerFilterChange">
  12 + <el-option :label="'新设备'" :value="false">
  13 + </el-option>
  14 + <el-option :label="'老设备'" :value="true">
  15 + </el-option>
  16 + </el-select>
  17 + </el-form-item>
  18 + <el-form-item label="在线情况">
  19 + <el-select v-model="online" clearable placeholder="请选择" @change="handlerOnlineChange">
  20 + <el-option :label="'在线'" :value="'在线'">
  21 + </el-option>
  22 + <el-option :label="'离线'" :value="'离线'">
  23 + </el-option>
  24 + </el-select>
  25 + </el-form-item>
  26 + </el-form>
  27 + <el-container>
  28 + <el-main style="background-color: #ffffff;">
  29 + <el-table :data="deviceList" style="width: 100%" v-loading="loading">
  30 + <el-table-column prop="vehicle" label="车载">
  31 + </el-table-column>
  32 + <el-table-column prop="deviceId" label="设备id">
  33 + </el-table-column>
  34 + <el-table-column prop="oldDevice" label="设备情况">
  35 + <template slot-scope="scope">
  36 + <el-tag v-if="scope.row.oldDevice" type="danger">老设备</el-tag>
  37 + <el-tag v-else type="success">新设备</el-tag>
  38 + </template>
  39 + </el-table-column>
  40 + <el-table-column prop="status" label="在线状态">
  41 + <template slot-scope="scope">
  42 + <!-- 标签 -->
  43 + <el-tag v-if="scope.row.status == '在线'" type="success">在线</el-tag>
  44 + <el-tag v-if="scope.row.status == '离线'" type="danger">离线</el-tag>
  45 + </template>
  46 + </el-table-column>
  47 + <el-table-column fixed="right" label="操作" width="100">
  48 + <template slot-scope="scope">
  49 + <el-button @click="handleClick(scope.row)" type="text" size="small">通道</el-button>
  50 + </template>
  51 + </el-table-column>
  52 + </el-table>
  53 + <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
  54 + :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
  55 + </el-pagination>
  56 + </el-main>
  57 + </el-container>
  58 + </div>
  59 +</template>
  60 +
  61 +<script>
  62 +import MinhangService from "../service/MinhangService.js";
  63 +export default {
  64 + name: 'minhang',
  65 + data() {
  66 + return {
  67 + filterOld: null,
  68 + online: null,
  69 + loading: false,
  70 + deviceList: [],
  71 + pageNo: 1,
  72 + pageSize: 10,
  73 + total: 0,
  74 + loading: false,
  75 + minhangService: new MinhangService()
  76 + };
  77 + },
  78 + created() {
  79 + this.loading = true;
  80 + this.handlerQueryList()
  81 + },
  82 + methods: {
  83 + handlerQueryList() {
  84 + this.loading = true;
  85 + let params = {
  86 + pageNo: this.pageNo,
  87 + pageSize: this.pageSize,
  88 + filterOld: this.filterOld,
  89 + online: this.online
  90 + };
  91 + this.minhangService.getMinhangDeviceList(params, (res => {
  92 + try {
  93 + this.deviceList = res.data.list;
  94 + this.total = res.data.total;
  95 + } catch (error) {
  96 + console.log(error);
  97 + this.$message.error("获取设备列表失败");
  98 + }
  99 + this.loading = false;
  100 + }))
  101 + },
  102 + handlerOnlineChange() {
  103 + this.handlerQueryList();
  104 + },
  105 + handlerFilterChange() {
  106 + this.handlerQueryList();
  107 + },
  108 + handleClick(val) {
  109 + console.log(val);
  110 + this.$router.push({
  111 + path: `/minhang/deviceList/channel/${val.deviceId}`,
  112 + })
  113 + },
  114 + handleSizeChange(val) {
  115 + console.log("handleSizeChange", val);
  116 + },
  117 + handleCurrentChange(val) {
  118 + this.pageNo = val;
  119 + this.handlerQueryList();
  120 + }
  121 + },
  122 +}
  123 +</script>
  124 +
  125 +<style></style>
web_src/src/components/common/minhangChannel.vue 0 → 100644
  View file @cc220d1
  1 +<template>
  2 + <div id="channelList" style="width: 100%">
  3 + <div class="page-header">
  4 + <div class="page-title">
  5 + <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text"
  6 + @click="showDevice"></el-button>
  7 + <el-divider direction="vertical"></el-divider>
  8 + 设备列表
  9 + </div>
  10 + </div>
  11 + <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"
  12 + v-if="showVideoDialog">
  13 + <div style="width: 100%; height: 100%">
  14 + <!-- 使用video播放视频铺满 -->
  15 + <video ref="myVideo" autoplay controls width="100%" height="500" id="myVideo"></video>
  16 + </div>
  17 + </el-dialog>
  18 + <el-container style="height: 82vh;">
  19 + <el-main style="padding: 5px;">
  20 + <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%"
  21 + header-row-class-name="table-header">
  22 + <el-table-column prop="name" label="通道名称" min-width="180">
  23 + </el-table-column>
  24 + <el-table-column label="操作" width="100" fixed="right">
  25 + <template slot-scope="scope">
  26 + <el-button @click="handlerOnPlay(scope.row)" size="medium" icon="el-icon-video-play" type="text">播放
  27 + </el-button>
  28 + </template>
  29 + </el-table-column>
  30 + </el-table>
  31 + </el-main>
  32 + </el-container>
  33 + </div>
  34 +</template>
  35 +
  36 +<script>
  37 +import flvjs from 'flv.js';
  38 +import MinhangService from "../service/MinhangService.js";
  39 +export default {
  40 + name: 'minhangChannel',
  41 + data() {
  42 + return {
  43 + videoUrl: "",
  44 + player: null,
  45 + hasAudio: false,
  46 + showVideoDialog: false,
  47 + minhangService: new MinhangService(),
  48 + deviceId: this.$route.params.deviceId,
  49 + deviceChannelList: [
  50 + {
  51 + channelId: 5,
  52 + name: "车前",
  53 + },
  54 + {
  55 + channelId: 3,
  56 + name: "驾驶舱"
  57 + },
  58 + {
  59 + channelId: 0,
  60 + name: "中门",
  61 + },
  62 + {
  63 + channelId: 4,
  64 + name: "前门"
  65 + },
  66 + {
  67 + channelId: 2,
  68 + name: "后车厢"
  69 + },
  70 + {
  71 + channelId: 7,
  72 + name: "右后视镜"
  73 + },
  74 + {
  75 + channelId: 6,
  76 + name: "倒车"
  77 + },
  78 + {
  79 + channelId: 1,
  80 + name: "前车箱"
  81 + },
  82 + ],
  83 + online: "",
  84 + subStream: "",
  85 + winHeight: window.innerHeight - 200,
  86 + currentPage: 1,
  87 + count: 15,
  88 + total: 0,
  89 + };
  90 + },
  91 +
  92 + mounted() {
  93 + this.initData();
  94 +
  95 + },
  96 + destroyed() {
  97 + if (!this.player) return
  98 + this.player.pause()
  99 + this.player.unload()
  100 + this.player.detachMediaElement()
  101 + this.player.destroy()
  102 + this.player = null
  103 + },
  104 + methods: {
  105 + createdPlay() {
  106 + if (flvjs.isSupported()) {
  107 + // var videoDom = document.getElementById('myVideo')
  108 + console.log(this.videoUrl);
  109 + let videoDom = this.$refs.myVideo
  110 + // 创建一个播放器实例
  111 + var player = flvjs.createPlayer({
  112 + type: 'flv', // 媒体类型，默认是 flv,
  113 + isLive: true, // 是否是直播流
  114 + url: this.videoUrl // 流地址
  115 + }, {
  116 + // 其他的配置项可以根据项目实际情况参考 api 去配置
  117 + autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
  118 + })
  119 + player.attachMediaElement(videoDom)
  120 + player.load()
  121 + player.play()
  122 + this.player = player
  123 + }
  124 + },
  125 + showDevice() {
  126 + this.$router.push({ name: 'minhang' })
  127 + },
  128 + initData() {
  129 +
  130 + },
  131 + handlerOnPlay(val) {
  132 + this.minhangService.onPlay(this.deviceId, val.channelId, (res => {
  133 + this.videoUrl = res.data
  134 + this.showVideoDialog = true
  135 + this.$nextTick(() => {
  136 + this.createdPlay()
  137 + })
  138 + }))
  139 + },
  140 + close() {
  141 + this.showVideoDialog = false
  142 + }
  143 + }
  144 +};
  145 +</script>
  146 +
  147 +<style>
  148 +.videoList {
  149 + display: flex;
  150 + flex-wrap: wrap;
  151 + align-content: flex-start;
  152 +}
  153 +
  154 +.video-item {
  155 + position: relative;
  156 + width: 15rem;
  157 + height: 10rem;
  158 + margin-right: 1rem;
  159 + background-color: #000000;
  160 +}
  161 +
  162 +.video-item-img {
  163 + position: absolute;
  164 + top: 0;
  165 + bottom: 0;
  166 + left: 0;
  167 + right: 0;
  168 + margin: auto;
  169 + width: 100%;
  170 + height: 100%;
  171 +}
  172 +
  173 +.video-item-img:after {
  174 + content: "";
  175 + display: inline-block;
  176 + position: absolute;
  177 + z-index: 2;
  178 + top: 0;
  179 + bottom: 0;
  180 + left: 0;
  181 + right: 0;
  182 + margin: auto;
  183 + width: 3rem;
  184 + height: 3rem;
  185 + background-size: cover;
  186 + background-color: #000000;
  187 +}
  188 +
  189 +.video-item-title {
  190 + position: absolute;
  191 + bottom: 0;
  192 + color: #000000;
  193 + background-color: #ffffff;
  194 + line-height: 1.5rem;
  195 + padding: 0.3rem;
  196 + width: 14.4rem;
  197 +}
  198 +</style>
web_src/src/components/service/MinhangService.js 0 → 100644
  View file @cc220d1
  1 +import axios from 'axios';
  2 +
  3 +class MinhangService{
  4 +
  5 + constructor() {
  6 + this.$axios = axios;
  7 + }
  8 +
  9 + getMinhangDeviceList(params, callback, errorCallback){
  10 + this.$axios({
  11 + method: 'get',
  12 + url:`/api/vehicle/query`,
  13 + params: {
  14 + ...params
  15 + }
  16 + }).then((res) => {
  17 + if (typeof (callback) == "function") callback(res.data)
  18 + }).catch((error) => {
  19 + console.log(error);
  20 + if (typeof (errorCallback) == "function") errorCallback(error)
  21 + });
  22 + }
  23 + onPlay(deviceId,channel, callback, errorCallback){
  24 + this.$axios({
  25 + method: 'get',
  26 + url:`/api/vehicle/onPlay`,
  27 + params: {
  28 + deviceId,
  29 + channel,
  30 + }
  31 + }).then((res) => {
  32 + if (typeof (callback) == "function") callback(res.data)
  33 + }).catch((error) => {
  34 + console.log(error);
  35 + if (typeof (errorCallback) == "function") errorCallback(error)
  36 + });
  37 + }
  38 +}
  39 +
  40 +export default MinhangService;