内窥镜添加

whychdw

2021-08-02 8bd40db215402d4326679a3c67b3be9c530134bf

内窥镜添加

 package-lock.json

Diff too large

 package.json

@@ -9,11 +9,13 @@
  },
  "dependencies": {
    "axios": "^0.21.1",
    "chokidar": "^2.1.8",
    "core-js": "^3.6.5",
    "echarts": "^4.8.0",
    "echarts-liquidfill": "^2.0.6",
    "element-ui": "^2.13.2",
    "file-saver": "^2.0.2",
    "flv.js": "^1.6.1",
    "inmap": "^2.3.3",
    "js-md5": "^0.7.3",
    "moment": "^2.27.0",
@@ -21,11 +23,15 @@
    "postcss-px2rem": "^0.3.0",
    "qs": "^6.9.4",
    "script-loader": "^0.7.2",
    "video.js": "^7.14.3",
    "videojs-flash": "^2.1.0",
    "videojs-swf": "^5.4.2",
    "vue": "^2.6.11",
    "vue-draggable-resizable": "^2.2.0",
    "vue-jsonp": "^0.1.8",
    "vue-layer": "^1.2.0",
    "vue-router": "^3.4.3",
    "vue-video-player": "^5.0.1",
    "vuedraggable": "^2.24.3",
    "vuejs-progress-bar": "^1.2.2",
    "vuex": "^3.5.1",

 src/assets/css/common.css

@@ -409,3 +409,10 @@
    width: 100%;
    height: 100%;
}

.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1.5rem;
    margin-top: -0.8rem;
}

 src/components/rtmpVideo.vue

New file
@@ -0,0 +1,91 @@
<template>
    <div class="rtmp-video-wrapper">
        <video ref="videoPlayer" :options="options" class="video-js"></video>
    </div>
</template>

<script>
import videoJs from 'video.js';
import 'videojs-flash';
import SWF_URL from 'videojs-swf/dist/video-js.swf';

export default {
    name: "rtmpVideo",
    player: "",
    data() {
        return {
            options: {
                width: 800,
                height: 450,
                controls: true,        // 控制栏
                autoplay: false,         // 自动播放
                sources: [{             // 流配置，数组形式，会根据兼容顺序自动切换
                    type: 'rtmp/mp4',
                    src: 'rtmp://58.200.131.2:1935/livetv/hunantv' // 亲测可用
                }],
                techOrder: ['html5', 'flash'],
                flash: {
                    swf: SWF_URL
                }
            },
            playFlag: false,
        }
    },
    methods: {
        create() {
            let self = this;
            // 初始化播放器
            this.$options.player = videoJs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
                console.log('onPlayerReady', this);

                this.on('pause', function() {
                    console.log('暂停播放')
                })
                this.on('play', function() {
                    self.playFlag = true;
                    console.log('开始/恢复播放')
                })
                this.on('ended', function() {
                    console.log('结束播放')
                })
                this.on('loadeddata', function() {
                    console.log('loadeddata数据加载完成')
                })
                this.on('error', function() {
                    console.log('error')
                })
            });
        },
        play() {
            this.$nextTick(()=>{
                if(this.$options.player) {
                    this.$options.player.play();
                }
            });

        },
        dispose() {
            if(this.$options.player) {
                this.playFlag = false;
                this.$options.player.dispose();
                this.$options.player = "";
            }
        },
    },
    mounted() {
        this.create();
        console.log(this.$options.player);
    },
    beforeDestroy() {
        this.dispose();
        console.log("销毁rtmp流");
    }
}
</script>

<style scoped>
.rtmp-video-wrapper {
    width: 100%;
    height: 100%;
}
</style>

 src/main.js

@@ -18,6 +18,8 @@

import './assets/iconfont/iconfont.css';

import 'video.js/dist/video-js.css';

// jsonp请求方式  请求tx地图接口  
import VueJsonp from 'vue-jsonp'
import axios from './assets/js/axios'

 src/pages/dataTest/realTimeAio.vue

@@ -79,6 +79,9 @@
                                    <li class="hdw-menu-item" v-if="control.data.clearAlerm.show">
                                        <a @click="clearAlerm" href="javascript:void(0);">清除告警</a>
                                    </li>
                                    <li class="hdw-menu-item" v-if="control.data.clearAlerm.show">
                                        <a @click="showVideoDialog" href="javascript:void(0);">内窥镜</a>
                                    </li>
                                    <!-- <li class="hdw-menu-item" v-if="control.data.pause.show">
                                        <a @click="pause(type)" href="javascript:void(0);">暂停{{typeStr}}}</a>
                                    </li> -->
@@ -292,6 +295,10 @@
                   top="0" class="dialog-center" :modal-append-to-body="false">
            <activate-dialog-content v-if="dialog.show" :type="dialog.type" :batt="batt"></activate-dialog-content>
        </el-dialog>
        <el-dialog title="内窥镜" width="800px" :visible.sync="videoDialog.show" :close-on-click-modal="false"
                   top="0" class="dialog-center" :modal-append-to-body="false" :destroy-on-close="true">
            <rtmp-video></rtmp-video>
        </el-dialog>
    </flex-layout>
</template>

@@ -336,6 +343,7 @@
import {
    const_aio
} from '@/assets/js/const';
import RtmpVideo from "@/components/rtmpVideo";

let vol, resChart, temp, conduct, currChart, leakVol;
let staticL, stateL, flushL;
@@ -344,12 +352,13 @@
export default {
    name: "realTimeAio",
    components: {
        RtmpVideo,
        ContentBox,
        BarChart,
        // ChargeDialogContent,
        // DischargeDialogContent,
        ActivateDialogContent,
        CircuitDiagram
        CircuitDiagram,
    },
    watch: {
        "$route.params.BattGroupId"(BattGroupId) {
@@ -364,6 +373,11 @@
            this.resize();
          });
        },
        'diagram.type' (n) {
            if (n == 2 || n ==4) {
                resetFirstTime();
            }
        }
    },
    data () {
        let permits = this.$store.state.user.permits;
@@ -474,14 +488,10 @@
                ,Q3: false
                ,Q4: false
                ,Q5: false
            }
        }
    },
    watch: {
        'diagram.type' (n) {
            if (n == 2 || n ==4) {
                resetFirstTime();
            }
            },
            videoDialog: {
                show: false,
            },
        }
    },
    computed: {
@@ -1205,7 +1215,10 @@
               ,width: pos.width * ratio + 'px'
               ,height: pos.height * ratio + 'px'
           }
        }
        },
        showVideoDialog() {
            this.videoDialog.show = true;
        },
    },
    mounted() {
        // console.log(this.$route.params, 'mounted');

 vue.config.js

@@ -1,4 +1,5 @@
const px2rem = require('postcss-px2rem')
const path = require('path')

const postcss = px2rem({
    remUnit: 20   //基准大小 baseSize，需要和rem.js中相同
@@ -11,6 +12,7 @@
        config.externals = {
           BMap: "BMap"
        }
        config.resolve.modules = [path.resolve('node_modules'), 'node_modules'];
    },
    css: {
        loaderOptions: {
@@ -25,4 +27,11 @@
    devServer: {
        https: false
    },
    chainWebpack:(config)=>{
        config.module.rule('swf')
            .test(/\.swf/)
            .use('url-loader')
            .loader('url-loader')
            .options({limit:10000})
    },
}