ZZJ
2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3
src/pages/desktop/index/App.vue
@@ -1,15 +1,15 @@
<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 NotificationCenter from './components/NotificationCenter';
import NoticeTip from './components/NoticeTip';
@@ -17,80 +17,148 @@
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, 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: '' });
      });
    }
  }
}
@@ -112,7 +180,7 @@
  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;
}