| | |
| | | <template> |
| | | <div id="app"> |
| | | <div id="app" @contextmenu.prevent> |
| | | <tools></tools> |
| | | <desktop></desktop> |
| | | <tools-entry ref="dock_model"></tools-entry> |
| | | <!-- <dock ref="dock_model"></dock> --> |
| | | <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 Dock from './components/Dock'; |
| | | import Preference from './components/Preference'; |
| | | 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' |
| | | import { findAllSdk } from '@/api/taskMange' |
| | | |
| | | import config from '../../../../package.json' |
| | | |
| | | export default { |
| | | name: 'app', |
| | | components: { |
| | | Desktop, Dock, Preference, NotificationCenter, NoticeTip, Tools, ToolsEntry |
| | | Desktop, NotificationCenter, NoticeTip, Tools, ToolsEntry |
| | | }, |
| | | data() { |
| | | return { |
| | | buttonAuthority: sessionStorage.getItem('buttonAuthoritys') || [] |
| | | } |
| | | }, |
| | | computed: { |
| | | isAdmin() { |
| | | if ( |
| | | sessionStorage.getItem('userInfo') && |
| | | sessionStorage.getItem('userInfo') !== '' |
| | | ) { |
| | | let loginName = JSON.parse(sessionStorage.getItem('userInfo')).username |
| | | return ( |
| | | loginName === 'superadmin' || loginName === 'basic' |
| | | ) |
| | | } |
| | | return false |
| | | } |
| | | }, |
| | | mounted() { |
| | | document.getElementById('app').style.backgroundImage = process.env.VUE_APP_MAIN_URL; |
| | | this.showApps(); |
| | | |
| | | 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); |
| | | }); |
| | | } |
| | | |
| | | // setTimeout(function () { |
| | | // _that.$refs.dock_model.initDockItem(); |
| | | // }, 100); |
| | | // axios.get(process.env.VUE_APP_USER_DATA_URL).then(function (res) { |
| | | |
| | | // }); |
| | | |
| | | let msgResp = require("./mock/messages.json") |
| | | if (msgResp.success) { |
| | | msgResp.data.forEach(function (item) { |
| | | _that.addMessage(item); |
| | | }) |
| | | } |
| | | // axios.get(process.env.VUE_APP_MESSAGE_URL).then(function (res) { |
| | | |
| | | // }); |
| | | |
| | | let weather = require("./mock/weather.json") |
| | | if (weather.success) { |
| | | _that.addWeather(weather.data.data); |
| | | } |
| | | // axios.get(process.env.VUE_APP_WEATHER_URL).then(function (res) { |
| | | |
| | | // }); |
| | | |
| | | setTimeout(function () { |
| | | _that.addMessage({ |
| | | id: 'N1', |
| | | icon: 'images/frost.png', |
| | | tip: '分布式任务调度', |
| | | title: '默认账号', |
| | | body: '账号:frost 密码:frost', |
| | | time: new Date() |
| | | }, true); |
| | | }, 3000); |
| | | |
| | | setTimeout(function () { |
| | | _that.addMessage({ |
| | | id: 'N2', |
| | | icon: 'images/message.png', |
| | | icon: '/images/desktop/message.png', |
| | | tip: '消息', |
| | | title: '官方QQ', |
| | | body: '1106088328', |
| | | title: 'SmartAI', |
| | | body: 'V' + config.version, |
| | | time: new Date() |
| | | }, true); |
| | | }, 6000); |
| | | |
| | | console.log(this.$store.state.desktop) |
| | | }, 1000); |
| | | window.addEventListener('message', (e) => { |
| | | if (e.data.msg == 'AppUpdate') { |
| | | this.showApps(); |
| | | } |
| | | }); |
| | | }, |
| | | methods: { |
| | | 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(); |
| | | } |
| | | // 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: '' }); |
| | | }); |
| | | } |
| | | } |
| | | } |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | background-size: 100% 100%; |
| | | background-image: url("../../../assets/img/desktop/desktop.png"); |
| | | background-image: url("/images/desktop/background.png"); |
| | | background-attachment: fixed; |
| | | } |
| | | |
| | | .clearFix:after{ |
| | | content: ''; |
| | | .clearFix:after { |
| | | content: ""; |
| | | display: block; |
| | | height: 0; |
| | | clear: both; |