<template>
|
<div id="app">
|
<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'
|
|
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);
|
});
|
}
|
|
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: {
|
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>
|
