From 21a340c24815a55a07db2dc3d2e5a19e7de440cd Mon Sep 17 00:00:00 2001 From: hanbaoshan <hanbaoshan@aiotlink.com> Date: 星期六, 29 八月 2020 19:27:57 +0800 Subject: [PATCH] 添加摄像机区域管理应用 --- src/pages/desktop/index/App.vue | 83 ++++++++++++++++++++++------------------- 1 files changed, 45 insertions(+), 38 deletions(-) diff --git a/src/pages/desktop/index/App.vue b/src/pages/desktop/index/App.vue index b58209a..37a8aa5 100644 --- a/src/pages/desktop/index/App.vue +++ b/src/pages/desktop/index/App.vue @@ -1,28 +1,28 @@ <template> - <div id="app"> + <div id="app" @contextmenu.prevent=""> <tools></tools> - <preference></preference> <desktop></desktop> - <dock ref="dock_model"></dock> + <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 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' export default { name: 'app', components: { - Desktop, Dock, Preference, NotificationCenter, NoticeTip, Tools + Desktop, NotificationCenter, NoticeTip, Tools, ToolsEntry }, + mounted() { document.getElementById('app').style.backgroundImage = process.env.VUE_APP_MAIN_URL; let _that = this; @@ -33,54 +33,27 @@ }); } - 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: '璐﹀彿锛歠rost 瀵嗙爜锛歠rost', - 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: 'v1.0.0', time: new Date() }, true); - }, 6000); - - console.log(this.$store.state.desktop) + }, 1000); }, methods: { addMessage: function (message, ding) { @@ -92,6 +65,32 @@ }, addWeather: function (weather) { this.$store.commit('desktop/addWeather', weather); + }, + screenShot(dock){ + //鎵惧埌褰撳墠鐨刬frame + 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:''}); + }); } } } @@ -113,6 +112,14 @@ width: 100%; height: 100%; background-size: 100% 100%; - background-image: url("../../../assets/img/desktop/main.jpg"); + background-image: url("/images/desktop/background.png"); + background-attachment: fixed; +} + +.clearFix:after { + content: ""; + display: block; + height: 0; + clear: both; } </style> -- Gitblit v1.8.0