zhangzengfei
2020-09-03 3efae02a275998bc3f8d8ed780fcf884da72683e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
  <div id="app" @contextmenu.prevent>
    <tools></tools>
    <desktop></desktop>
    <tools-entry ref="dock_model"></tools-entry>
    <notice-tip ref="notice_tip_model"></notice-tip>
    <notification-center></notification-center>
  </div>
</template>
 
<script>
import html2canvas from 'html2canvas';
import Desktop from './components/Desktop';
import NotificationCenter from './components/NotificationCenter';
import NoticeTip from './components/NoticeTip';
import Tools from './components/Tools';
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;
    this.showApps();
 
    let _that = this;
    let msgResp = require("./mock/messages.json")
    if (msgResp.success) {
      msgResp.data.forEach(function (item) {
        _that.addMessage(item);
      })
    }
 
    let weather = require("./mock/weather.json")
    if (weather.success) {
      _that.addWeather(weather.data.data);
    }
    setTimeout(function () {
      _that.addMessage({
        id: 'N2',
        icon: '/images/desktop/message.png',
        tip: '消息',
        title: 'SmartAi',
        body: 'v1.0.0',
        time: new Date()
      }, true);
    }, 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();
      // }
      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: '' });
      });
    }
  }
}
</script>
 
<style>
html {
  height: 100%;
}
 
body {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow: hidden;
}
 
#app {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("/images/desktop/background.png");
  background-attachment: fixed;
}
 
.clearFix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
</style>