Merge branch 'master' of http://192.168.5.5:10010/r/vue-smart-ai

hanbaoshan

2020-08-15 ddb0df2153bc75e54c3f7c1049be663d4d2dba96

 src/pages/desktop/index/components/Tools.vue

@@ -12,11 +12,11 @@
      </div>
    </div>
    <div class="tools-middle">
      <div v-for="dock in $store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}">
      <div v-for="dock in $store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}" @mouseover="screenShot(dock)">
        <a @click="dockClick(dock)">
          <img class="dock-item" :src="dock.src" :alt="dock.alt" />
          <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot"/>
          
          <!-- <iframe class="dock-shot" :src="dock.url"  ></iframe> -->
        </a>
      </div>
    </div>
@@ -49,6 +49,7 @@
</template>

<script>
import html2canvas from 'html2canvas';
import {logout} from "@/api/login";
export default {
  name: "Tools",
@@ -139,6 +140,33 @@
        this.$store.commit("desktop/refreshFrame", dock);
      }
    },
    screenShot(dock){
      debugger
      //找到当前的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:''});
      });
    },
    toLogout(){
      this.$confirm("提示：确定退出吗？", {
        center: true,
@@ -197,6 +225,7 @@
  float: left;
  position: relative;
}

.tools .tools-middle::before {
  width: 1px;
  height: 20px;
@@ -232,6 +261,7 @@
}
.dock-item-wrap .dock-shot {
  visibility: hidden;
  /* transform: scale(0.5); */
  width: 100px;
  height: 46px;
  position: absolute;