摄像机树增加导入功能

zhangzengfei

2020-09-07 929cf4c7be11bfd1e134d0cb0d7cbbe94772ebdf

 src/pages/desktop/index/App.vue

@@ -1,5 +1,5 @@
<template>
  <div id="app">
  <div id="app" @contextmenu.prevent>
    <tools></tools>
    <desktop></desktop>
    <tools-entry ref="dock_model"></tools-entry>
@@ -9,6 +9,7 @@
</template>

<script>
import html2canvas from 'html2canvas';
import Desktop from './components/Desktop';
import NotificationCenter from './components/NotificationCenter';
import NoticeTip from './components/NoticeTip';
@@ -16,22 +17,19 @@
import ToolsEntry from './components/ToolsEntry';
import axios from 'axios'

import { getApps } from '@/api/app'

export default {
  name: 'app',
  components: {
    Desktop, NotificationCenter, NoticeTip, Tools, ToolsEntry
  },
  

  mounted() {
    document.getElementById('app').style.backgroundImage = process.env.VUE_APP_MAIN_URL;
    let _that = this;
    let user_res = require("./mock/userData.json")
    if (user_res.success) {
      user_res.data.docks.forEach(function (item) {
        _that.$store.commit('desktop/addDock', item);
      });
    }
    this.showApps();

    let _that = this;
    let msgResp = require("./mock/messages.json")
    if (msgResp.success) {
      msgResp.data.forEach(function (item) {
@@ -55,15 +53,52 @@
    }, 1000);
  },
  methods: {
    showApps() {
      let _that = this;

      getApps().then(rsp => {
        if (rsp && rsp.success) {
          rsp.data.forEach(function (item) {
            _that.$store.commit('desktop/addDock', item);
          });
        }
      })
    },
    addMessage: function (message, ding) {
      this.$store.dispatch('desktop/addMessage', message);
      if (ding) {
        new Audio('sounds/ping.mp3').play();
      }
      // if (ding) {
      //   new Audio('sounds/ping.mp3').play();
      // }
      this.$refs.notice_tip_model.showTip(message);
    },
    addWeather: function (weather) {
      this.$store.commit('desktop/addWeather', weather);
    },
    screenShot(dock) {
      //找到当前的iframe
      let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(dock.url) >= 0);
      //保存当前应用快照
      html2canvas(curIframe.contentWindow.document.body, {
        dpi: window.devicePixelRatio * 4,
        logging: true, //查看html2canvas内部执行流程
        removeContainer: true,
        imageTimeout: 0,
        useCORS: true, //开启跨域配置
        //allowTaint: true
      }).then(canvas => {
        let shotSrc = canvas.toDataURL();
        // this.$store.commit('desktop/addMinDock', {
        //   id: dock.id,
        //   src: dock.icon,
        //   alt: dock.title,
        //   type: "3",
        //   screenshot: shotSrc
        // });
        this.$store.commit('desktop/shotscreen', { id: dock.id, src: shotSrc });

      }).catch(e => {
        this.$store.commit('desktop/shotscreen', { id: dock.id, src: '' });
      });
    }
  }
}