<template>
|
<div id="app" @contextmenu.prevent>
|
<tools ref="tools" @jumpToDock="onJumpToDock"></tools>
|
<desktop @quit="quit" ref="desktop"></desktop>
|
<tools-entry @changeBackground="onChangeBg" 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 { getServerName } from "./api.ts"
|
|
import { getApps } from "@/api/app"
|
import { getDevInfo } from "@/api/login"
|
|
import config from "../../../../package.json"
|
|
export default {
|
name: "app",
|
components: {
|
Desktop,
|
NotificationCenter,
|
NoticeTip,
|
Tools,
|
ToolsEntry
|
},
|
data() {
|
return {
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || []
|
// defaultBgUrl:"/images/desktop/background.png"
|
}
|
},
|
computed: {
|
isAdmin() {
|
if (sessionStorage.getItem("userInfo") && sessionStorage.getItem("userInfo") !== "") {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username
|
return loginName === "superadmin" || loginName === "basic"
|
}
|
return false
|
},
|
defaultBgUrl() {
|
if (JSON.parse(sessionStorage.getItem("userInfo"))) {
|
return JSON.parse(sessionStorage.getItem("userInfo")).backgroundpic
|
}
|
return ""
|
}
|
},
|
created() {
|
this.getServerName()
|
this.getDevInfo()
|
},
|
mounted() {
|
document.getElementById("app").style.backgroundImage = `url(${this.defaultBgUrl ||
|
"/images/desktop/background.png"})`
|
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: "V" + config.version,
|
time: new Date()
|
},
|
true
|
)
|
}, 1000)
|
window.addEventListener("message", (e) => {
|
if (e.data.msg == "AppUpdate") {
|
this.showApps()
|
}
|
if (e.data.msg == "checkSN") {
|
this.$refs.desktop.validateSn()
|
}
|
if (e.data.msg === "changeColor") {
|
const iframeArr = document.querySelectorAll("iframe")
|
iframeArr.forEach((item) => {
|
item.contentWindow.postMessage({ msg: "changeColor", color: e.data.color }, "*")
|
})
|
}
|
})
|
},
|
methods: {
|
quit() {
|
this.$refs.tools.toLogout()
|
},
|
onJumpToDock(name) {
|
this.$refs.dock_model.onJumpToDock(name)
|
},
|
onChangeBg(v) {
|
document.getElementById("app").style.backgroundImage = "url(" + v + ")"
|
},
|
showApps() {
|
let _that = this
|
|
getApps().then((rsp) => {
|
if (rsp && rsp.success) {
|
_that.$store.state.desktop.docks = []
|
let installedApps = []
|
rsp.data
|
rsp.data.forEach(function(item) {
|
if (item.installed) {
|
let temp = {
|
id: item.id,
|
create_by: item.create_by,
|
create_time: item.create_time,
|
height: item.height,
|
icon: item.icon,
|
src: item.iconBlob ? "data:image/png;base64," + item.iconBlob : item.icon,
|
installed: item.installed,
|
isDelete: item.isDelete,
|
isUpgrade: item.isUpgrade,
|
title: item.title,
|
name: item.package,
|
remoteVersion: item.remoteVersion,
|
type: item.type,
|
update_by: item.update_by,
|
update_time: item.update_time,
|
url: item.url,
|
version: item.version,
|
width: item.width,
|
isDefault: item.isDefault
|
}
|
|
// 判断权限
|
// if (_that.isAdmin || _that.buttonAuthority.indexOf(item.package) >= 0) {
|
_that.$store.commit("desktop/addDock", temp)
|
// }
|
|
installedApps.push(item.package)
|
}
|
})
|
sessionStorage.setItem("apps", installedApps.join(","))
|
}
|
})
|
},
|
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: "" })
|
})
|
},
|
async getServerName() {
|
let res = await getServerName()
|
if (res && res.success) {
|
this.serverTitle = res.data.serverName
|
window.document.title = res.data.serverName ? res.data.serverName : "SmartAI"
|
sessionStorage.setItem("title", res.data.serverName)
|
}
|
},
|
async getDevInfo() {
|
const res = await getDevInfo()
|
if (res && res.success && res.data.deviceType.substr(0, 2) === "DS") {
|
sessionStorage.setItem("isShowPolling", "show")
|
}
|
}
|
}
|
}
|
</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>
|
