VUE父子組件之間的相互調(diào)用

父組件：

<template>
  <!-- 保持與設計稿同樣比例，保證頁面能完全顯示，但是四周可能存在留白 -->
  <div class="wrapper">
    <div class="container">
      <div :style="marginStyle">
        <div style="position: relative;">
          <div class="dashboard-container" style="width: 1920px;height: 1080px;" :style="transformStyle">
            <div class="border-container">
              <topLayer ref="topLayer" @triggerBrotherMethods="exit"></topLayer>
            </div>
            <div class="dataview-container">
              <!-- 上半部分 -->
              <!-- <div style="">
                
              </div> -->
              <a-row>
                <!-- 左邊部分 -->
                <a-col :span="14">
                  <monitorVideo ref="monitorVideo" v-if=suspectNo :suspectNo="suspectNo"  :cameras="cameras" ></monitorVideo>

                </a-col>
                <!-- 右邊部分 -->
                <a-col :span="10">
                  <monitorData ref="monitorData" v-if=suspectNo :suspectNo="suspectNo"></monitorData>
                </a-col>
              </a-row>
              <!-- 下半部分 -->
              <a-row style="height: 40%;">
                <a-col :span="6">
                  <behaviorAnalysis ref="behaviorAnalysis" v-if=suspectNo :suspectNo="suspectNo"></behaviorAnalysis>
                </a-col>
                <a-col :span="6">
                  <sleepAnalysis ref="sleepAnalysis" v-if=suspectNo :suspectNo="suspectNo"></sleepAnalysis>

                </a-col>
                <a-col :span="6">
                  <recentlyAnalysis ref="recentlyAnalysis" v-if=suspectNo :suspectNo="suspectNo"></recentlyAnalysis>
                </a-col>
                <a-col :span="6">
                  <warnMessage ref="warnMessage" v-if=suspectNo :suspectNo="suspectNo"></warnMessage>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

import {getComputedStyle} from "@/utils/util";

import {debounce} from "lodash";

import topLayer from '@/views/trzhkh/wiseCare/modules/topLayer'

import monitorVideo from '@/views/trzhkh/wiseCare/modules/monitorVideo'

import monitorData from '@/views/trzhkh/wiseCare/modules/monitorData'

import behaviorAnalysis from '@/views/trzhkh/wiseCare/modules/behaviorAnalysis'

import warnMessage from '@/views/trzhkh/wiseCare/modules/warnMessage'

import sleepAnalysis from '@/views/trzhkh/wiseCare/modules/sleepAnalysis'

import recentlyAnalysis from '@/views/trzhkh/wiseCare/modules/recentlyAnalysis'

export default {

name: "wiseCare",

components: {

topLayer,

monitorVideo,

monitorData,

behaviorAnalysis,

warnMessage,

sleepAnalysis,

recentlyAnalysis

data() {

return {

scaleX: 1,

scaleY: 1,

marginXHorizontal: 0,

marginYHorizontal: 0,

suspectNo: '',

cameras: ''

};

mounted() {

this.init();

this.suspectNo = this.$route.query.suspectNo; //接收參數(shù)

this.cameras = this.$route.query.cameras;

var suspectNo = this.suspectNo;

console.log("接受參數(shù)留置人員編號11---", this.cameras)

computed: {

transformStyle: function() {

return {

transform: `scale(${this.scaleX}, ${this.scaleY}) translate3d(0.001%, 0.001%, 0)`

};

marginStyle: function() {

return {

margin: `${this.marginYHorizontal}px ${this.marginXHorizontal}px`

};

}

methods: {

// 子組件2中click事件

triggerBrotherMethods() {

// 父組件通過$ref調(diào)用子組件1中的事件方法

this.$refs.borther[1].bortherMethods()

init() {

this.listenResize();

initData() {

this.scaleX = 1;

this.scaleY = 1;

this.marginXHorizontal = 0;

this.marginYHorizontal = 0;

initScale() {

this.initData();

// return;

let $container = document.querySelector('.container');

let containerWidth = getComputedStyle($container, 'width').replace("px", "");

let containerHeight = getComputedStyle($container, 'height').replace("px", "");

containerWidth = Number(containerWidth);

containerHeight = Number(containerHeight);

containerWidth = isNaN(containerWidth) ? 0 : containerWidth;

containerHeight = isNaN(containerHeight) ? 0 : containerHeight;

let defaultHeight = 1080;

let defaultWidth = 1920;

// sacle 縮放比例。

let scale = 1;

let scaleY = containerHeight / defaultHeight;

let scaleX = containerWidth / defaultWidth;

if (containerHeight < defaultHeight) {

scale = containerHeight / defaultHeight;

this.scaleX = scaleX;

this.scaleY = scaleY;

this.$bus.$emit('getScale', {

scaleX,

scaleY

});

// console.log("height", scale);

}

// 然后 width

else if (containerWidth < defaultWidth) {

scale = containerWidth / defaultWidth;

this.scaleX = scaleX;

this.scaleY = scaleY;

this.$bus.$emit('getScale', {

scaleX,

scaleY

});

// console.log("width", scale);

} else if (containerHeight > defaultHeight && containerWidth > defaultWidth) {

// let h = containerHeight / defaultHeight;

// let w = containerWidth / defaultWidth;

// scale = w;

this.scaleX = containerWidth / defaultWidth;

this.scaleY = containerHeight / defaultHeight;

this.$bus.$emit('getScale', {

scaleX,

scaleY

});

}

// scale = Math.min.apply(null, [this.scaleY, this.scaleX]);

let marginWidth = defaultWidth * this.scaleX;

if (containerWidth > marginWidth) {

marginWidth = (containerWidth - marginWidth) / 2;

this.marginXHorizontal = marginWidth;

}

let marginHeight = defaultHeight * this.scaleY;

if (containerHeight > marginHeight) {

marginHeight = (containerHeight - marginHeight) / 2;

this.marginYHorizontal = marginHeight;

}

listenResize() {

this.initScale();

window.addEventListener('resize', debounce(() => {

this.initScale();

}, 300));

}

destroyed() {}

}

</script>

@fontColor: #f2b61b;

.wrapper {

position: relative;

height: 100%;

width: 100%;

position: relative;

// background-size: 100% 100%;

}

.container {

overflow: hidden;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

.dashboard-container {

position: relative;

user-select: none;

width: 100%;

height: 100%;

transform-origin: 0 0;

transition: all .3s linear;

overflow: hidden;

background: transparent url(~@/assets/images/dataview/dataview-bg.png) center top no-repeat;

background-size: 100% 100%;

}

.top {

position: absolute;

margin-left: 20px;

top: 47px;

width: 1920px;

height: 67px;

/*background: transparent url(~@/assets/border-big.png) center top no-repeat;*/

}

@keyframes jumpLine1 {

0% {

transform: translate(10px, 0px);

}

100% {

transform: translate(190px, 0px);

}

@keyframes jumpLine2 {

0% {

transform: translate(0px, 0px);

}

100% {

transform: translate(-180px, 0px);

}

@keyframes bounce {

0% {

transform: scaleX(0);

}

100% {

transform: scaleX(1);

}

.dataview-container {

box-sizing: border-box;

margin-top: 110px;

height: calc(100% - 110px);

// display: flex;

// flex-direction: row;

padding: 0 30px;

}

.pannel-title {

padding: 5px 0 0 60px;

color: @fontColor;

font-size: 18px;

}

.content-container {

padding: 30px 20px;

}

.scroll-warp {

overflow: hidden;

}

</style>

子組件1

<template>
  <div class="monitor-area">

    <div class="monitor-area-top">編號:{{bodyAnalysis.suspectNo}}</div>
    <div class="monitor-content">
      <div class="left">

        <!-- <div class="information-area" v-for="(item, index) in items">
              <div class="information-area-top">{{item.name}}</div>
              <div class="information-area-bottom">{{item.value}}</div>
          </div> -->
        <div class="information-area">
          <div class="information-area-top">性別：</div>
          <div class="information-area-bottom">{{bodyAnalysis.sex}}</div>
        </div>
        <div class="information-area">
          <div class="information-area-top">既往病史：</div>
          <div class="information-area-bottom">{{bodyAnalysis.medicalHistory}}</div>
        </div>
        <div class="information-area">
          <div class="information-area-top">入所日期：</div>
          <div class="information-area-bottom">{{bodyAnalysis.beginTime}}</div>
        </div>
        <div class="information-area">
          <div class="information-area-top">已留置：</div>
          <div class="information-area-bottom">{{bodyAnalysis.beginBetweenDay}}天</div>
        </div>
        <div class="information-area">
          <div class="information-area-top">職級：</div>
          <div class="information-area-bottom">{{bodyAnalysis.dutiesLeval}}</div>
        </div>
        <div class="information-area">
          <div class="information-area-top">當前留置室：</div>
          <div class="information-area-bottom">{{bodyAnalysis.roomName}}</div>
        </div>
        <!-- <div class="information-area">
          <div class="information-area-top">已談話次數(shù)：</div>
          <div class="information-area-bottom">{{bodyAnalysis.talkNum}}次</div>
        </div> -->
        <div class="information-area">
          <div class="information-area-top">已延期天數(shù)：</div>
          <div class="information-area-bottom">{{bodyAnalysis.timeOutDay}}</div>
        </div>
      </div>
      <!-- 監(jiān)控視頻部分 -->
      <div class="right">
        <div class="monitor-video-area">
          <hk-video :cameraIndexCodeProp="devicesCode" ></hk-video>
        </div>
        <div class="monitor-video-area">

        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import {
    getBodyAnalysis
  } from '@/api/wiseCare.js'
  import HkVideo from './hkVideo'
  import { getAction, postFormAction, postAction} from '@/api/manage'
  export default {
    components: {
      HkVideo
    },
    props: {
      suspectNo: String,
      cameras: String
    },
    data() {
      return {
        bodyAnalysis: {},
        devicesCode: this.cameras
      }
    },
    computed: {},
    created() {},
    mounted() {
      // this.init()
      this.bodySignAnalysis();

    },
    methods: {
      bortherMethods() {
        // 子組件事件方法
        this.$refs.hkVideo.destroyedView()
      },
      //請求體征分析留置對象信息********************************************************、、
     async bodySignAnalysis() {
        this.loading = true;
        var that = this;
        var suspectNo= this.suspectNo;
        const params = {
          'suspectNo': suspectNo
        };
        // getAction('/objAnalysis/getLienObjBySuspectNo', params)
        // .then(res => {
        //   if (res.success) {
        //     let result = res.result || []
        //     this.bodyAnalysis = result;
        //     console.log("-----請求體征分析------", this.bodyAnalysis);
        //   }
        // })
        // .finally(() => {
        //   this.loading = false
        // })

        try {
          const res = await getBodyAnalysis(params)
          if (res.success) {
            that.bodyAnalysis = res.result;
            console.log("-----請求體征分析------", res.result);

          }
        } catch (e) {
          this.loading = false
        }
      },

    },
  }
</script>

<style lang="less">
  // 監(jiān)控區(qū)域
  .monitor-area {
    width: 1128px;
    height: 630px;
    background-size: 100% 630px;
    margin-left: 20px;
    // background-color: green;
    background-image: url('~@/assets/images/wiseCare/monitor_background.png');
    background-repeat: no-repeat;

    .monitor-area-top {
      font-size: 32px;
      padding-left: 5%;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #F4C021;
      line-height: 82px;
    }

    .monitor-content {
      display: flex;
      height: 700px;

      // 左邊
      .left {
        .information-area {
          min-width: 130px;
          min-height: 50px;
          padding: 12px 10px;
          padding-left: 15px;
          font-size: 14px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-image: url('~@/assets/images/wiseCare/behavior_analysis_content_bg.png');
          .information-area-top {
            color: #04EEFE;
          }

          .information-area-bottom {
            color: #21FE04;
          }
        }


      }

      .information-area:not(:first-child) {
        margin-top: 10px;
      }

      //右邊
      .right {
        width: 80%;
        // background-color: #04EEFE;
      }

      .monitor-video-area {
        margin-left: 20px;
        // width: 50%;
        // height: 200px;
        // background-color: #05347D;
      }
    }

  }
</style>

View Code

子組件2

<template>
  <div class="top-layer">
    <span class="top-layer-title">智慧看護對象數(shù)據(jù)看板</span>
    <span class="top-layer-date">{{ date }}</span>
    <span class="top-layer-user"> 當前登陸人：管理員 </span>
    <div class="top-layer-home">
      <div class="top-layer-home-outline"></div>
      <div class="top-layer-home-inline"></div>
      <div class="top-layer-home-house" title="點擊返回業(yè)務系統(tǒng)" @click="toHome()"></div>
    </div>
    <div class="top-layer-back">
      <div class="top-layer-back-outline"></div>
      <div class="top-layer-back-inline"></div>
      <div class="top-layer-back-text" title="點擊退出系統(tǒng)" @click="exit()">返回</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      description: '大屏頂部',
      date: null,
    }
  },
  computed: {},
  created() {
    this.setDate()
  },
  mounted() {},
  methods: {
    setDate() {
      setInterval(() => {
        this.date = this.$dayjs().format('YYYY年MM月DD日 HH:mm')
      })
    },
    /*****退出******/
    exit(){
      this.$router.back()
      this.$emit('clickBrotherBtn', true)
    },
    /*****回到主頁******/
    toHome(){
      this.$router.push({ path: "/trzhkh/obj/modules/TbObjectManage" }).catch(()=>{
        console.log('跳轉(zhuǎn)首頁出錯')
      })
    }
  },
}
</script>

<style lang="less">
@fontColor: #00fbff;
#rotateAnimate() {
  .outline {
    background: url('~@/assets/images/dataview/home-outline.png') no-repeat center center;
    background-size: 100% 100%;
    -webkit-animation: changeright 6s linear infinite;
    animation: changeright 6s linear infinite;
  }
  .inline {
    background: url('~@/assets/images/dataview/home-inline.png') no-repeat center center;
    background-size: 100% 100%;
    -webkit-animation: changeleft 6s linear infinite;
    animation: changeleft 6s linear infinite;
  }
  .house {
  }
}
.top-layer {
  height: calc(100vh * 0.15);
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: url('~@/assets/images/dataview/toplayer-bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  &-title {
    position: absolute;
    top: 5%;
    left: 43%;
    font-size: 26px;
    color: @fontColor;
    z-index: 3;
    cursor: pointer;
  }
  &-date {
    position: absolute;
    top: 17%;
    left: 18%;
    color: @fontColor;
    font-size: 17px;
  }
  &-home {
    position: absolute;
    top: 10%;
    left: 6%;
    width: 70px;
    height: 70px;
    z-index: 3;
    &-outline {
      width: 100%;
      height: 100%;
      #rotateAnimate.outline();
    }
    &-inline {
      position: absolute;
      top: 5%;
      left: 7%;
      width: 90%;
      height: 90%;
      #rotateAnimate.inline();
    }
    &-house {
      position: absolute;
      top: 34%;
      left: 37%;
      width: 20px;
      height: 20px;
      background: url('~@/assets/images/dataview/home.png') no-repeat center center;
      background-size: 100% 100%;
      cursor: pointer;
    }
  }
  &-user {
    position: absolute;
    top: 17%;
    right: 18%;
    font-size: 17px;
    color: @fontColor;
  }
  &-back {
    position: absolute;
    top: 10%;
    right: 6%;
    width: 70px;
    height: 70px;
    z-index: 3;
    &-outline {
      width: 100%;
      height: 100%;
      #rotateAnimate.outline();
    }
    &-inline {
      position: absolute;
      top: 5%;
      left: 7%;
      width: 90%;
      height: 90%;
      #rotateAnimate.inline();
    }
    &-text {
      position: absolute;
      top: 34%;
      left: 32%;
      color: @fontColor;
      cursor: pointer;
    }
  }
  @keyframes changeright {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(180deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes changeleft {
    0% {
      transform: rotate(0deg);
    }

    50% {
      transform: rotate(-180deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }
}
</style>

View Code

子組件3

<template>
  <div>
    <!--視頻窗口展示-->
    <div id="playWnd" class="playWnd" style=""></div>
  </div>
</template>
<script>
  import constant from '../../../../utils/constant.js'
  import {
    watch
  } from 'less';
  import moment from 'moment'
  // let divWidth = 930; // 容器寬
  // let divHeight = 450; // 容器高
  //聲明公用變量
  let initCount = 0; // 初始化重試次數(shù),3次失敗則報錯
  let oWebControl; // 頁面控制對象
  let pubKey = '';
  export default {
    name: 'hkVideo',
    data() {
      return { // 視頻播放
        cameraIndexCode: this.cameraIndexCodeProp, // 攝像頭的code, 我是父頁面?zhèn)鬟^來的
        key: '',
        HKIP: '',
        Port: '',
        secret: '',
        screenWidth: document.body.clientWidth, //瀏覽器寬度
        screenHeight: document.body.clientHeight //瀏覽器高度
      }
    },
    props: {
      cameraIndexCodeProp: Array,
    }, // 接收父頁面?zhèn)鱽淼膮?shù)
    mounted() {
      console.log("----222-----",this.cameraIndexCodeProp)
      const that = this
      window.onresize = () => {
        return (() => {
          //根據(jù)窗口變化調(diào)整視頻窗口大小
          window.screenWidth = document.body.clientWidth;
          that.screenWidth = 0.46 * window.screenWidth;
          window.screenHeight = document.body.clientHeight;
          that.screenHeight = 0.48 * window.screenHeight;
          console.log("窗口變化寬度", document.body.clientWidth);
          console.log("窗口變化高度", document.body.clientHeight);
          if (oWebControl != null) {
            this.destroyedView();
            setTimeout(this.initView, 500);
            oWebControl.JS_Resize(that.screenWidth, that.screenHeight);
            //this.setWndCover();
          }
        })()
      }
      // // 有攝像頭 code, 才加載, 另外因為我每次只顯示一個, 所以顯示之前要把之前顯示的攝像頭銷毀, 所以加了 oWebControl == null 的判斷.
      // if(this.cameraIndexCode && oWebControl == null){
      //   this.initView();
      // }else{
      //   // 如果 code 不為空, 則先銷毀現(xiàn)有攝像頭, 再去加載新的攝像頭
      //   this.destroyedView();
      //   setTimeout(this.initView, 1000);
      // }
    },
    created() {
      this.getHK()
      // if(this.HKinfo.key){
      //   this.key = this.HKinfo.key
      //   this.secret = this.HKinfo.secret
      //   this.Port = this.HKinfo.HKPort
      //   this.HKIP = this.HKinfo.HKIP
      //   // 有攝像頭 code, 才加載, 另外因為我每次只顯示一個, 所以顯示之前要把之前顯示的攝像頭銷毀, 所以加了 oWebControl == null 的判斷.
      //   if(this.cameraIndexCode.length>0 && oWebControl == null){
      //     this.initView();
      //   }else{
      //     // 如果 code 不為空, 則先銷毀現(xiàn)有攝像頭, 再去加載新的攝像頭
      //     this.destroyedView();
      //     setTimeout(this.initView, 1000);
      //   }
      // }else{
      //   this.getHK()
      // }
    },
    computed: {
      // ...mapGetters(['HKinfo'])
    },
    methods: {
      async getHK() {
        // this.key = '29305541'
        // this.secret = 'quaMHuWIp05r9by98sMM'
        // this.Port = '2443'
        // this.HKIP = '113.125.113.194'
        //公共頁面引入，避免多端更改
        const configValue = constant.HK_config
        this.key = configValue.key
        this.secret = configValue.secret
        this.Port = configValue.HKPort
        this.HKIP = configValue.HKIP
        this.initView();
        // const info = await this.$store.dispatch('GetHKinfo')
        // if(info){
        //   const k = info.find(item=>item.value==='AppKey')
        //   const i = info.find(item=>item.value==='IP')
        //   const s = info.find(item=>item.value==='APPsecret')
        //   const p = info.find(item=>item.value==='Port')
        //   this.key = k.code
        //   this.secret = s.code
        //   this.Port = p.code
        //   this.HKIP = i.code
        //   // 有攝像頭 code, 才加載, 另外因為我每次只顯示一個, 所以顯示之前要把之前顯示的攝像頭銷毀, 所以加了 oWebControl == null 的判斷.
        //   if(this.cameraIndexCode.length>0 && oWebControl == null){
        //     this.initView();
        //   }else{
        //     // 如果 code 不為空, 則先銷毀現(xiàn)有攝像頭, 再去加載新的攝像頭
        //     this.destroyedView();
        //     setTimeout(this.initView, 1000);
        //   }
        // }
      },
      // 創(chuàng)建播放實例, 這里不用改
      initPlugin() { // 初始化播放插件, 相當于準備播放環(huán)境(不是重點, 但要記著這是每次加載的第一步, 不然切換畫面會有坑)
        const _this = this;
        window.screenWidth = document.body.clientWidth;
        let divWidth = 0.46 * window.screenWidth; //容器寬度
        window.screenHeight = document.body.clientHeight;
        let divHeight = 0.48 * window.screenHeight; //容器高度
        //let divWidth = 930;
        //let divHeight = 450; //容器高度
        oWebControl = new WebControl({
          szPluginContainer: "playWnd", // 指定容器id
          iServicePortStart: 15900, // 指定起止端口號，建議使用該值
          iServicePortEnd: 15909,
          szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function() { // 創(chuàng)建WebControl實例成功
            oWebControl.JS_StartService("window", { // WebControl實例創(chuàng)建成功后需要啟動服務
              dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"寫死
            }).then(function() { // 啟動插件服務成功
              oWebControl.JS_SetWindowControlCallback({ // 設置消息回調(diào)
                cbIntegrationCallBack: _this.cbIntegrationCallBack
              });

              oWebControl.JS_CreateWnd("playWnd", divWidth, divHeight).then(
                function() { //JS_CreateWnd創(chuàng)建視頻播放窗口，寬高可設定
                  _this.init(); // 創(chuàng)建播放實例成功后初始化
                });
            }, function() { // 啟動插件服務失敗
            });
          },
          cbConnectError: function() { // 創(chuàng)建WebControl實例失敗
            oWebControl = null;
            // publicUtils.notify('warn', "插件未啟動，正在嘗試啟動，請稍候...");
            WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未啟動時執(zhí)行error函數(shù)，采用wakeup來啟動程序
            initCount++;
            if (initCount < 3) {
              setTimeout(function() {
                this.initPlugin();
              }, 3000)
            } else {
              // publicUtils.notify('error', "插件啟動失敗，請檢查插件是否安裝！");
            }
          },
          cbConnectClose: function(bNormalClose) {
            // 異常斷開：bNormalClose = false
            // JS_Disconnect正常斷開：bNormalClose = true
            if (!bNormalClose) {
              // publicUtils.notify('error', "視屏鏈接異常中斷！");
            }
            oWebControl = null;
          }
        });
      },

      //初始化, 主要改這里
      init() {
        const _this = this;
        window.screenWidth = document.body.clientWidth;
        let divWidth = 0.46 * window.screenWidth; //容器寬度
        window.screenHeight = document.body.clientHeight;
        let divHeight = 0.48 * window.screenHeight; //容器高度
        this.getPubKey(function() {
          // 請自行修改以下變量值
          let appkey = _this.key //綜合安防管理平臺提供的appkey，必填
          let secret = _this.setEncrypt(_this.secret); //綜合安防管理平臺提供的secret，必填
          let ip = _this.HKIP; //綜合安防管理平臺IP地址，必填
          let playMode = 0; //初始播放模式：0-預覽，1-回放
          let port = Number(_this.Port); //綜合安防管理平臺端口，若啟用HTTPS協(xié)議，默認443
          let snapDir = "D:\\SnapDir"; //抓圖存儲路徑
          let videoDir = "D:\\VideoDir"; //緊急錄像或錄像剪輯存儲路徑
          let layout = "2x2"; //playMode指定模式的布局
          let enableHTTPS = 1; //是否啟用HTTPS協(xié)議與綜合安防管理平臺交互，這里總是填1
          let encryptedFields = 'secret'; //加密字段，默認加密領域為secret
          let showToolbar = 1; //是否顯示工具欄，0-不顯示，非0-顯示
          let showSmart = 1; //是否顯示智能信息（如配置移動偵測后畫面上的線框），0-不顯示，非0-顯示
          let buttonIDs = "0,16,256,257,259,513,514,516,517,768,769"; //自定義工具條按鈕
          let toolBarButtonIDs = "4096,2304,4098,4099"; //自定義工具欄按鈕
          // 請自行修改以上變量值

          oWebControl.JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
              appkey: appkey, //API網(wǎng)關提供的appkey
              secret: secret, //API網(wǎng)關提供的secret
              ip: ip, //API網(wǎng)關IP地址
              playMode: playMode, //播放模式（決定顯示預覽還是回放界面）
              port: port, //端口
              snapDir: snapDir, //抓圖存儲路徑
              videoDir: videoDir, //緊急錄像或錄像剪輯存儲路徑
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否啟用HTTPS協(xié)議
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否顯示工具欄
              showSmart: showSmart, //是否顯示智能信息
              buttonIDs: buttonIDs, //自定義工具條按鈕
              toolBarButtonIDs: toolBarButtonIDs, //自定義工具欄按鈕
            })
          }).then(function(oData) {
            oWebControl.JS_Resize(divWidth, divHeight); // 初始化后resize一次，規(guī)避firefox下首次顯示窗口后插件窗口未與DIV窗口重合問題
          });
        });
      },

      //獲取公鑰, 不用改
      getPubKey(callback) {
        oWebControl.JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024
          })
        }).then(function(oData) {
          console.log(oData);
          if (oData.responseMsg.data) {
            pubKey = oData.responseMsg.data;
            callback()
          }
        })
      },

      //RSA加密, 不用改
      setEncrypt(value) {
        let encrypt = new JSEncrypt();
        encrypt.setPublicKey(pubKey);
        return encrypt.encrypt(value);
      },


      // 設置窗口裁剪，當因滾動條滾動導致窗口需要被遮住的情況下需要JS_CuttingPartWindow部分窗口
      setWndCover() {
        let iWidth = $(window).width();
        let iHeight = $(window).height();
        let oDivRect = $("#playWnd").get(0).getBoundingClientRect();

        let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
        let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
        let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
        let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

        iCoverLeft = (iCoverLeft > 1000) ? 1000 : iCoverLeft;
        iCoverTop = (iCoverTop > 600) ? 600 : iCoverTop;
        iCoverRight = (iCoverRight > 1000) ? 1000 : iCoverRight;
        iCoverBottom = (iCoverBottom > 600) ? 600 : iCoverBottom;

        oWebControl.JS_RepairPartWindow(0, 0, 1001, 600); // 多1個像素點防止還原后邊界缺失一個像素條
        if (iCoverLeft != 0) {
          oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 600);
        }
        if (iCoverTop != 0) {
          oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一個像素條，防止出現(xiàn)剪掉一部分窗口后出現(xiàn)一個像素條
        }
        if (iCoverRight != 0) {
          oWebControl.JS_CuttingPartWindow(1000 - iCoverRight, 0, iCoverRight, 600);
        }
        if (iCoverBottom != 0) {
          oWebControl.JS_CuttingPartWindow(0, 600 - iCoverBottom, 1000, iCoverBottom);
        }
      },

      //視頻預覽功能, 就設置 cameraIndexCode 就行了
      startPreview() {
        let _this = this;
        let cameraIndexCode = _this.cameraIndexCode; //獲取輸入的監(jiān)控點編號值，必填
        let streamMode = 0; //主子碼流標識：0-主碼流，1-子碼流
        let transMode = 1; //傳輸協(xié)議：0-UDP，1-TCP
        let gpuMode = 0; //是否啟用GPU硬解，0-不啟用，1-啟用
        let wndId = 0; //播放窗口序號（在2x2以上布局下可指定播放窗口）
        const cameraList = []
        // cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
        // cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
        console.log("------startPreview----------",cameraIndexCode)
        for (let i = 0, j = cameraIndexCode.length; i < j; i++) {
          let curCode = cameraIndexCode[i].indexCode
          curCode = curCode.replace(/(^\s*)/g, "");
          curCode = curCode.replace(/(\s*$)/g, "");
          cameraList.push({
            cameraIndexCode: curCode, //監(jiān)控點編號
            streamMode: streamMode, //主子碼流標識
            transMode: transMode, //傳輸協(xié)議
            gpuMode: gpuMode, //是否開啟GPU硬解
            wndId: i + 1 //可指定播放窗口
          })
        }
        oWebControl.JS_RequestInterface({
          funcName: "startMultiPreviewByCameraIndexCode",
          argument: {
            list: cameraList
          }
        })
      },

      initView() {
        // 先準備環(huán)境, 環(huán)境準備好才能加載, 所以給了個延遲, 用 Promise 同步執(zhí)行, 加載不出來.只能用此下策, 有空再優(yōu)化
        if (this.cameraIndexCode) {
          this.initPlugin();
          setTimeout(this.startPreview, 1000);
        }
      },
      //停止全部預覽
      stopAllPreview() {
        oWebControl.JS_RequestInterface({
          funcName: "stopAllPreview"
        })
      },
      //銷毀插件實例
      destroyedView() {
        console.log("---------destroyedView---------")
        if (oWebControl != null) {
          this.stopAllPreview();
          oWebControl.JS_HideWnd(); // 先讓窗口隱藏，規(guī)避可能的插件窗口滯后于瀏覽器消失問題
          oWebControl.JS_Disconnect().then(function() { // 斷開與插件服務連接成功
            },
            function() { // 斷開與插件服務連接失敗
            });
        }
      },
    },

    destroyed() {
      this.destroyedView();
    }
  }
</script>

<style scoped>
  html,
  body {
    padding: 0;
    margin: 0;
  }

  .playWnd {
    /*width: 500px; !*播放容器的寬和高設定*!*/
    /*height: 300px;*/
  }

  .operate {
    margin-top: 24px;
  }

  .operate::after {
    content: '';
    display: block;
    clear: both;
  }

  .module {
    float: left;
    width: 340px;
    /*min-height: 320px;*/
    margin-left: 16px;
    padding: 16px 8px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
  }

  .module .item {
    margin-bottom: 4px;
  }

  .module input[type="text"] {
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0;
    width: 150px;
    min-height: 20px;
  }

  .module .btn {
    min-width: 80px;
    min-height: 24px;
    margin-top: 100px;
    margin-left: 80px;
  }
</style>

View Code

posted @ 2023-01-10 10:35 悠悠乃閱讀(360) 評論(0) 收藏舉報

刷新頁面返回頂部

悠悠乃

好記性不如爛筆頭

VUE父子組件之間的相互調(diào)用

公告