<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 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();
|
},
|
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") {
|
debugger;
|
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);
|
}
|
},
|
},
|
};
|
</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>
|
