fix-视频

public/index.html

@@ -5,6 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
+    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
+    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
+    <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
     <title>两江消防车辆联网系统</title>
     <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
     <!-- require cdn assets css -->

src/api/iot.js

@@ -29,3 +29,10 @@ export function getCarVideo (params) {
     params
   })
 }
+// 查询在线车辆视频
+export function getCarInfo (id) {
+  return request({
+    url: '/car/'+id,
+    method: 'get',
+  })
+}

src/views/cardIot/components/FireStationDetails.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <div class="fire">
+      <div class="car-in">车辆详情</div>
+      <div style="display: flex;justify-content: space-between;">
+        <div>
+          车牌号：
+          <span>{{ carinfo.plateNumber ? carinfo.plateNumber : '暂无' }}</span>
+        </div>
+        <div>
+          车辆类型：
+          <span>{{ carinfo.cryName ? carinfo.cryName : '暂无' }}</span>
+        </div>
+      </div>
+      <div>
+        所属单位：
+        {{ carinfo.depName ? carinfo.depName : '暂无' }}
+      </div>
+      <div>
+        联系人：
+        {{ carinfo.owner ? carinfo.owner : '暂无' }}
+      </div>
+      <div>
+        联系人电话：
+        {{ carinfo.phone ? carinfo.phone : '暂无' }}
+      </div>
+      <div style="display: flex; justify-content: space-between">
+        <div style="display: flex; flex-direction: column; width: 120px; text-align: center">
+          <span>5871天</span>
+          <span>安全运行天数</span>
+        </div>
+        <div style="display: flex; flex-direction: column; width: 120px; text-align: center">
+          <span>0次</span>
+          <span>月使用次数</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCarInfo } from '@/api/iot'
+export default {
+  data() {
+    return {
+      carinfo: {},
+    }
+  },
+  methods: {
+    FunInfo() {
+      getCarInfo(716).then((res) => {
+        console.log('=========>>', res)
+        this.carinfo = res.data
+      })
+    },
+  },
+  created() {
+    this.FunInfo()
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.fire {
+  width: 350px;
+  height: 200px;
+  background: #fff;
+  margin-top: 20px;
+  padding: 8px 10px;
+  font-size: 14px;
+  font-family: 'Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif';
+  // color: #000;
+  // color: #ccc;
+  line-height: 27px;
+  .car-in{
+    width: 100%;
+    border-bottom: 1px solid #74bff5;
+    background: #74bff5;
+    color: #fff;
+    padding: 0 6px;
+  }
+}
+</style>

src/views/cardIot/components/QuantityOil.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="ma-bg">
+    <!-- 水箱 -->
+    <div class="main">
+      <span style="color: #5695ed;">水箱水量</span>
+      <div class="bg">
+        <span class="lin-z"></span>
+      </div>
+    </div>
+    <div class="main" style="margin-left: 20px;">
+      <span style="color: #5695ed;">油箱油量</span>
+      <div class="bg">
+        <span class="lin-z"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="less" scoped>
+.ma-bg {
+ display: flex;
+  margin-top: 20px;
+  .main{
+    width: 350px;
+  height: 150px;
+  background: #fff;
+  padding: 8px 10px;
+//   overflow-y: scroll;
+  }
+  .bg {
+    position: relative;
+    width: 54px;
+    height: 120px;
+    background: linear-gradient(
+      180deg,
+      rgba(0, 221, 22, 0.3) 0,
+      rgba(0, 221, 22, 0.3) 33%,
+      rgba(221, 119, 0, 0.3) 66%,
+      rgba(221, 31, 0, 0.3)
+    );
+    .lin-z{
+        position: absolute;
+        left: 17px;
+        bottom: 0;
+        display: inline-block;
+        width: 20px;
+        height: 100px;
+        background: #0f41a6;
+        opacity: .5;
+    }
+  }
+}
+::-webkit-scrollbar-track-piece {
+  background: #d3dce6;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+</style>

src/views/cardIot/components/TreeCar.vue

@@ -81,9 +81,14 @@
     </div>
     <div>
       <!-- 机构详情 -->
-      <Statistics v-if="showBtn" />
+      <Statistics v-if="showBtn&&this.show==1" />
       <!-- 在线车辆视频 -->
+      <!-- v-if="this.show==2&&carInfo"  -->
       <Video />
+      <!-- 机构详情 -->
+      <FireStationDetails/>
+      <!-- 油箱 -->
+      <QuantityOil/>
     </div>
   </div>
 </template>
@@ -92,6 +97,8 @@
 import { getCarTree, getCarList } from '@/api/iot'
 import Statistics from './Statistics.vue'
 import Video from './Video.vue'
+import FireStationDetails from './FireStationDetails.vue'
+import QuantityOil from './QuantityOil.vue'
 const getParentKey = (key, tree) => {
   let parentKey
   for (let i = 0; i < tree.length; i++) {
@@ -107,7 +114,7 @@ const getParentKey = (key, tree) => {
   return parentKey
 }
 export default {
-  components: { Statistics, Video },
+  components: { Statistics, Video ,FireStationDetails,QuantityOil},
   data() {
     return {
       placement: null,
@@ -122,6 +129,7 @@ export default {
       dataList: [],
       autoExpandParent: true,
       showBtn: false,
+      carInfo:null
     }
   },
   methods: {
@@ -185,7 +193,7 @@ export default {
       this.showBtn = !this.showBtn
     },
     OnlineCar(val) {
-      console.log(val)
+      this.carInfo=val
     },
   },
   created() {

src/views/cardIot/components/Video.vue

@@ -3,18 +3,18 @@
     <div class="item-video">
       <div class="video-box">
         <video
+          ref="videoPlayer"
           :preload="preload"
           :poster="videoImg"
           :height="height"
-          autoplay
           :width="width"
           align="center"
           :controls="controls"
           :autoplay="autoplay"
-          class="video"
-          v-if="videoSrc"
+          
+          class="video video-js vjs-default-skin vjs-big-play-centered"
+          
         >
-          <source :src="videoSrc" type="video/mp4" />
         </video>
         <div class="line"></div>
         <div class="text">
@@ -32,10 +32,11 @@
 
 <script>
 import { getCarVideo } from '@/api/iot'
+import axios from 'axios'
 export default {
-  data () {
+  data() {
     return {
-      videoSrc: '',
+      videoSrc: null,
       videoImg: '',
       playStatus: '',
       muteStatus: '',
@@ -49,54 +50,64 @@ export default {
       typeList: [
         {
           id: 2,
-          lable: '大巴摄像头'
+          lable: '大巴摄像头',
         },
         {
           id: 3,
-          lable: '驾驶员'
+          lable: '驾驶员',
         },
         {
           id: 4,
-          lable: '车内'
+          lable: '车内',
         },
         {
           id: 5,
-          lable: '车前方'
+          lable: '车前方',
         },
         {
           id: 6,
-          lable: '车后方'
+          lable: '车后方',
         },
         {
           id: 7,
-          lable: '车左侧'
+          lable: '车左侧',
         },
         {
           id: 8,
-          lable: '车右侧'
-        }
+          lable: '车右侧',
+        },
       ],
-      carId: 2
+      carId: 2,
     }
   },
   methods: {
-    FunVdieoList () {
+    FunVdieoList() {
       const params = {
-        vehicleId: '8a1ac19c525a822001525d718a002311',
-        channel: this.carId
+        vehicleId: '1656135934669',
+        channel: this.carId,
       }
       getCarVideo(params).then((res) => {
-        this.videoSrc = res.msg
-        console.log('-----------00s', res)
+        this.videoSrc = `blob:${res.msg.replace('http://183.66.101.92:1078/video', '/video')}`
+        var flvPlayer = flvjs.createPlayer({
+            type: 'flv',
+            url: res.msg
+        });
+        //url: xxx 为后台请求数据的视频
+        flvPlayer.attachMediaElement(this.$refs.videoPlayer);
+        flvPlayer.load();
+        flvPlayer.play();
       })
     },
-    Onchange (val) {
+    Onchange(val) {
       this.carId = val.id
-    }
+    },
   },
-  created () {
+  created() {
     this.FunVdieoList()
-  }
+
+  },
+  mounted() {
+  },
 }
 </script>
 
@@ -126,13 +137,14 @@ export default {
 }
 .video-box {
   width: 350px;
-  height: 600px;
+  height: 350px;
   background: #fff;
   margin-top: 20px;
   padding: 8px 9px;
   .video {
     width: 330px;
     height: 260px;
+    object-fit: fill;
   }
 }
 </style>