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

guzijian
1 parent 705ac5c5
Showing 4 changed files with 364 additions and 1 deletions
src/main/java/com/genersoft/iot/vmp/vehicle/service/impl/VehicleDeviceServiceImpl.java
web_src/src/components/common/minhang.vue
web_src/src/components/common/minhangChannel.vue
web_src/src/components/service/MinhangService.js
@@ -45,7 +45,7 @@ public class VehicleDeviceServiceImpl implements VehicleDeviceService {
             }
         }
         if (StringUtils.isNotEmpty(online)) {
-            list = list.stream().filter(item->!item.getStatus().equals(online)).collect(Collectors.toList());
+            list = list.stream().filter(item->item.getStatus().equals(online)).collect(Collectors.toList());
         }
         if (filterOld != null) {
             list = list.stream().filter(item->item.getOldDevice().equals(filterOld)).collect(Collectors.toList());
+<template>
+  <div id="minhang" style="width: 100%;height: 100%; background-color: #FFFFFF; overflow: auto">
+    <div class="page-header">
+      <div class="page-title">
+        <el-divider direction="vertical"></el-divider>
+        设备列表
+      </div>
+    </div>
+    <el-form :inline="true" ref="form">
+      <el-form-item label="设备类型">
+        <el-select v-model="filterOld" clearable placeholder="请选择" @change="handlerFilterChange">
+          <el-option :label="'新设备'" :value="false">
+          </el-option>
+          <el-option :label="'老设备'" :value="true">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="在线情况">
+        <el-select v-model="online" clearable placeholder="请选择" @change="handlerOnlineChange">
+          <el-option :label="'在线'" :value="'在线'">
+          </el-option>
+          <el-option :label="'离线'" :value="'离线'">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <el-container>
+      <el-main style="background-color: #ffffff;">
+        <el-table :data="deviceList" style="width: 100%" v-loading="loading">
+          <el-table-column prop="vehicle" label="车载">
+          </el-table-column>
+          <el-table-column prop="deviceId" label="设备id">
+          </el-table-column>
+          <el-table-column prop="oldDevice" label="设备情况">
+            <template slot-scope="scope">
+              <el-tag v-if="scope.row.oldDevice" type="danger">老设备</el-tag>
+              <el-tag v-else type="success">新设备</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="在线状态">
+            <template slot-scope="scope">
+              <!-- 标签 -->
+              <el-tag v-if="scope.row.status == '在线'" type="success">在线</el-tag>
+              <el-tag v-if="scope.row.status == '离线'" type="danger">离线</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="100">
+            <template slot-scope="scope">
+              <el-button @click="handleClick(scope.row)" type="text" size="small">通道</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
+          :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
+        </el-pagination>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import MinhangService from "../service/MinhangService.js";
+export default {
+  name: 'minhang',
+  data() {
+    return {
+      filterOld: null,
+      online: null,
+      loading: false,
+      deviceList: [],
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      loading: false,
+      minhangService: new MinhangService()
+    };
+  },
+  created() {
+    this.loading = true;
+    this.handlerQueryList()
+  },
+  methods: {
+    handlerQueryList() {
+      this.loading = true;
+      let params = {
+        pageNo: this.pageNo,
+        pageSize: this.pageSize,
+        filterOld: this.filterOld,
+        online: this.online
+      };
+      this.minhangService.getMinhangDeviceList(params, (res => {
+        try {
+          this.deviceList = res.data.list;
+          this.total = res.data.total;
+        } catch (error) {
+          console.log(error);
+          this.$message.error("获取设备列表失败");
+        }
+        this.loading = false;
+      }))
+    },
+    handlerOnlineChange() {
+      this.handlerQueryList();
+    },
+    handlerFilterChange() {
+      this.handlerQueryList();
+    },
+    handleClick(val) {
+      console.log(val);
+      this.$router.push({
+        path: `/minhang/deviceList/channel/${val.deviceId}`,
+      })
+    },
+    handleSizeChange(val) {
+      console.log("handleSizeChange", val);
+    },
+    handleCurrentChange(val) {
+      this.pageNo = val;
+      this.handlerQueryList();
+    }
+  },
+}
+</script>
+
+<style></style>
+<template>
+  <div id="channelList" style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">
+        <el-button icon="el-icon-back" size="mini" style="font-size: 20px; color: #000;" type="text"
+          @click="showDevice"></el-button>
+        <el-divider direction="vertical"></el-divider>
+        设备列表
+      </div>
+    </div>
+    <el-dialog title="视频播放" top="0" :close-on-click-modal="false" :visible.sync="showVideoDialog" @close="close()"
+      v-if="showVideoDialog">
+      <div style="width: 100%; height: 100%">
+        <!-- 使用video播放视频铺满 -->
+        <video ref="myVideo" autoplay controls width="100%" height="500" id="myVideo"></video>
+      </div>
+    </el-dialog>
+    <el-container style="height: 82vh;">
+      <el-main style="padding: 5px;">
+        <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" style="width: 100%"
+          header-row-class-name="table-header">
+          <el-table-column prop="name" label="通道名称" min-width="180">
+          </el-table-column>
+          <el-table-column label="操作" width="100" fixed="right">
+            <template slot-scope="scope">
+              <el-button @click="handlerOnPlay(scope.row)" size="medium" icon="el-icon-video-play" type="text">播放
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import flvjs from 'flv.js';
+import MinhangService from "../service/MinhangService.js";
+export default {
+  name: 'minhangChannel',
+  data() {
+    return {
+      videoUrl: "",
+      player: null,
+      hasAudio: false,
+      showVideoDialog: false,
+      minhangService: new MinhangService(),
+      deviceId: this.$route.params.deviceId,
+      deviceChannelList: [
+        {
+          channelId: 5,
+          name: "车前",
+        },
+        {
+          channelId: 3,
+          name: "驾驶舱"
+        },
+        {
+          channelId: 0,
+          name: "中门",
+        },
+        {
+          channelId: 4,
+          name: "前门"
+        },
+        {
+          channelId: 2,
+          name: "后车厢"
+        },
+        {
+          channelId: 7,
+          name: "右后视镜"
+        },
+        {
+          channelId: 6,
+          name: "倒车"
+        },
+        {
+          channelId: 1,
+          name: "前车箱"
+        },
+      ],
+      online: "",
+      subStream: "",
+      winHeight: window.innerHeight - 200,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+    };
+  },
+
+  mounted() {
+    this.initData();
+
+  },
+  destroyed() {
+    if (!this.player) return
+    this.player.pause()
+    this.player.unload()
+    this.player.detachMediaElement()
+    this.player.destroy()
+    this.player = null
+  },
+  methods: {
+    createdPlay() {
+      if (flvjs.isSupported()) {
+        // var videoDom = document.getElementById('myVideo')
+        console.log(this.videoUrl);
+        let videoDom = this.$refs.myVideo
+        // 创建一个播放器实例
+        var player = flvjs.createPlayer({
+          type: 'flv', // 媒体类型，默认是 flv,
+          isLive: true, // 是否是直播流
+          url: this.videoUrl // 流地址
+        }, {
+          // 其他的配置项可以根据项目实际情况参考 api 去配置
+          autoCleanupMinBackwardDuration: true, // 清除缓存 对 SourceBuffer 进行自动清理
+        })
+        player.attachMediaElement(videoDom)
+        player.load()
+        player.play()
+        this.player = player
+      }
+    },
+    showDevice() {
+      this.$router.push({ name: 'minhang' })
+    },
+    initData() {
+
+    },
+    handlerOnPlay(val) {
+      this.minhangService.onPlay(this.deviceId, val.channelId, (res => {
+        this.videoUrl = res.data
+        this.showVideoDialog = true
+        this.$nextTick(() => {
+          this.createdPlay()
+        })
+      }))
+    },
+    close() {
+      this.showVideoDialog = false
+    }
+  }
+};
+</script>
+
+<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-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;
+}
+</style>
+import axios from 'axios';
+
+class MinhangService{
+
+  constructor() {
+    this.$axios = axios;
+  }
+
+  getMinhangDeviceList(params, callback, errorCallback){
+    this.$axios({
+      method: 'get',
+      url:`/api/vehicle/query`,
+      params: {
+        ...params
+      }
+    }).then((res) => {
+      if (typeof (callback) == "function") callback(res.data)
+    }).catch((error) => {
+      console.log(error);
+      if (typeof (errorCallback) == "function") errorCallback(error)
+    });
+  }
+  onPlay(deviceId,channel, callback, errorCallback){
+    this.$axios({
+      method: 'get',
+      url:`/api/vehicle/onPlay`,
+      params: {
+        deviceId,
+        channel,
+      }
+    }).then((res) => {
+      if (typeof (callback) == "function") callback(res.data)
+    }).catch((error) => {
+      console.log(error);
+      if (typeof (errorCallback) == "function") errorCallback(error)
+    });
+  }
+}
+
+export default MinhangService;