打开应用异步抓取快照去掉最小化快照,应用中心界面调整,初始应用窗口计算修改

hanbaoshan

2020-08-19 a5e8ef032f149ac7a3827169a8affa8ecd4cb4f9

打开应用异步抓取快照去掉最小化快照,应用中心界面调整,初始应用窗口计算修改

 src/components/cardWindow.vue

@@ -49,6 +49,7 @@
  </div>
</template>
<script>
import bus from '@/plugin/bus'
import ModelCard from '@/components/subComponents/ModelCard'
export default {
  name: 'cardWindow',

 src/pages/ai/index/App.vue

@@ -46,16 +46,23 @@
                    </div>

                    <div class="wrap-box" v-for="(item) in installedList" :key="item.id">

                      <div class="list-choose-item-left">

                        <div class="mask" v-if="!item.isEdit">

                        <!-- <div class="mask" v-if="!item.isEdit">

                          <el-button

                            @click="commandAlgLib(item)"

                            type="primary"

                            class="bot-btn"

                          >编辑名称</el-button>

                        </div>

                        </div> -->

                        <div class="list-complete-item-handle">

                          <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->

                          <div class="svg-wrap">

                            <div class="mask" v-if="!item.isEdit">

                              <el-button

                                @click="commandAlgLib(item)"

                                type="primary"

                                class="bot-btn"

                              >编辑名称</el-button>

                            </div>

                            <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                              <use :xlink:href="`#${item.icon}`" />

                            </svg>-->

@@ -1161,7 +1168,8 @@
  }

}

.src-title{

  color: #333;

  //color: #bfbfbf;

  color: #bbcee8;

  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC';

  font-weight: 650;

  font-style: normal;

@@ -1250,7 +1258,7 @@
        }

      }

      .task-list {

        background: #fff;

        background: #fdfdfd;

        padding: 20px;

        box-sizing: border-box;

        

@@ -1258,36 +1266,14 @@
          display: flex;

          flex-direction: row;

          flex-wrap: wrap;

          // justify-content: space-around;

          // align-content: space-around;

          // &:after {

          //   content: "";

          //   flex: auto;

          // }

          .wrap-box {

            width: 16.66%;

          }

          .list-choose-item-left {

            // width: 220px;

            // height: 214px;

            width: 80%;

            height: auto;

            margin: auto;

            margin-bottom: 30px;

            // @media screen and(min-width: 1895px) {

            //   //margin: 20px 25px 20px 20px;

            //   width: 230px;

            //   height: 224px;

            // }

            // @media screen and(min-width: 1695px) and(max-width:1895px ) {

            //   margin: 20px 10px 20px 15px;

            // }

            // @media screen and(min-width: 1460px) and(max-width: 1695px) {

            //   margin: 20px 25px 20px 20px;

            // }

            // @media screen and(max-width: 1460px) {

            //   margin: 20px 15px 20px 10px;

            // }

          }

        }

      }

@@ -1680,8 +1666,8 @@
      // height: 214px;

      transition: all 1s;

      background: #ffffff;

      border: 1px solid #e2e2e2;

      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

      //border: 1px solid #e2e2e2;

      //box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

      border-radius: 4px;

      p {

        display: none;

@@ -1701,6 +1687,7 @@
      .mask {

        display: flex;

        align-items: flex-end;

        top: 0;

        .bot-btn {

          flex: 1;

        }

@@ -1816,11 +1803,12 @@
      color: #222222;

    }

    .alg-name {

      margin-top: 12px;

      //margin-top: 12px;

      line-height: 36px;

      font-family: PingFangSC-Regular;

      font-size: 15px;

      color: #222222;

      font-size: 14px;

      letter-spacing: 0.05em;

      color: #3e4664;

      // background-color: #ecf5ff;

      .el-input {

        position: relative;

@@ -1852,13 +1840,16 @@
    }

    .list-complete-item-handle {

      height: 100%;

      padding-bottom: 10px;

      //padding-bottom: 10px;

      text-align: center;

      .svg-wrap {

        width: 80%;

        //width: 80%;

        width: 100%;

        margin: auto;

        padding-top: 80%;

        padding-top: 100%;

        position: relative;

        box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

        svg {

          position: absolute;

          top: 50%;

@@ -1866,11 +1857,13 @@
          transform: translate(-50%, -50%);

        }

        .baseImg {

          width: 60%;

          width: 56%;

          position: absolute;

          top: 50%;

          left: 50%;

          transform: translate(-50%, -50%);

          max-width: 106px;

          max-height: 106px;

        }

      }

    }


 src/pages/desktop/index/App.vue

@@ -9,6 +9,7 @@
</template>

<script>
import html2canvas from 'html2canvas';
import Desktop from './components/Desktop';
import NotificationCenter from './components/NotificationCenter';
import NoticeTip from './components/NoticeTip';
@@ -64,6 +65,32 @@
    },
    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:''});
      });
    }
  }
}

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

@@ -107,37 +107,48 @@
      this.$store.commit('desktop/refreshFrame', this.data);
    },
    minFrame(data, e) {
      debugger
 
      //if(data.name=='cameraVideo'||data.name=='search'||data.name=='library'||data.name=='cameraAccess'||data.name=='dataStack'){
        //let shotSrc = canvas.toDataURL();
        this.$store.commit('desktop/addMinDock', {
          id: this.data.id,
          src: this.data.icon,
          alt: this.data.title,
          type: "3",
          //screenshot: shotSrc
        });
        return false;
      //}
      //找到当前的iframe
      let curIframe = Array.from(document.querySelectorAll('iframe')).find(iframe => iframe.src.indexOf(data.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: this.data.id,
          src: this.data.icon,
          alt: this.data.title,
          type: "3",
          screenshot: shotSrc
        });
      }).catch(e=>{
        console.log(e);
        this.$store.commit('desktop/addMinDock', {
          id: this.data.id,
          src: this.data.icon,
          alt: this.data.title,
          type: "3",
          screenshot: ''
        });
      });
      return false;
      // 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: this.data.id,
      //     src: this.data.icon,
      //     alt: this.data.title,
      //     type: "3",
      //     screenshot: shotSrc
      //   });
      // }).catch(e=>{
      //   console.log(e);
      //   this.$store.commit('desktop/addMinDock', {
      //     id: this.data.id,
      //     src: this.data.icon,
      //     alt: this.data.title,
      //     type: "3",
      //     screenshot: ''
      //   });
      // });
      //return false;
      //this.refreshDock();
    },
    refreshDock: function () {
@@ -240,6 +251,7 @@
  border-top: 1px solid #d0d0d0;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;

}
.iframe-mask{
  position: absolute;
@@ -327,6 +339,7 @@
  height: calc(100% - 30px);
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  
}

.d-frame-content iframe {

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

@@ -12,7 +12,7 @@
      </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}" @mouseover="screenShot(dock)">
      <div v-for="dock in $store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap" :class="{'actived':dock.highlight}" >
        <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"/>
@@ -77,7 +77,7 @@
  //   '$store.state.desktop.frames':{
  //     handler(n,o){
  //       if(n){
  //         debugger;
  //         ;
  //         n.forEach((item,index) => {
  //           if(item.order >= this.maxOrder){
  //             this.maxOrderOne = item.id;
@@ -111,7 +111,7 @@
    togglePreference() {
      //this.$store.commit("desktop/togglePreference");
      //显示桌面,最小化已打开的应用
      debugger;
      ;
      this.$store.state.desktop.frames.forEach(frame => {
        this.$store.commit('desktop/addMinDock', {
          id: frame.id,
@@ -123,7 +123,7 @@
      })
    },
    dockClick(dock) {
      debugger
      
      if (dock.type === "1") {
        window.open(dock.url);
      } else if (dock.type === "2") {
@@ -136,37 +136,13 @@
      } else if (dock.type === "3") {
        this.$store.commit("desktop/resetMinFrame", dock.id);
        //点击的iframe置顶并高亮
        debugger
        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:''});
      });
    toolHover(dock){
      //this.$parent.screenShot(dock)
    },

    toLogout(){
      this.$confirm("提示：确定退出吗？", {
        center: true,

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

@@ -24,7 +24,6 @@
</template>



<script>



export default {

  name: 'toolsEntry',

  data() {

@@ -57,6 +56,7 @@
      if (dock.type === '1') {

        window.open(dock.url);

      } else if (dock.type === '2' && !dock.isOpen) {

        
        this.$store.dispatch('desktop/addFrame', {

          id: dock.id,

          icon: dock.src,

@@ -72,6 +72,12 @@
          url: dock.url,

          screenshot: ''

        });

        //打开应用后异步抓拍,之后的抓拍采用这张固定的

        //if(dock.name=='cameraVideo'||dock.name=='search'||dock.name=='library'||dock.name=='cameraAccess'||dock.name=='dataStack'){

          setTimeout(()=>{

            this.$parent.screenShot(dock);

          },1500)

        //}

      } else if (dock.type === '2' && dock.isOpen) {

        this.$store.commit('desktop/resetMinFrame', dock.id);

      }

@@ -88,7 +94,7 @@
      dockMask.style.width = dockItems.length * 60 + 40 + 'px';

    },

    addFrameByName(name, params) {

      debugger

      
      let dock = null;

      this.$store.state.desktop.docks.forEach(app => {

        if (app.name === name) {


 src/pages/desktop/index/store/modules/desktop.js

@@ -97,8 +97,7 @@
    //读取当前屏幕分辨率
    console.log(window.screen.availWidth);
    console.log(window.screen.availHeight);
    
    debugger;
    dframe.name = curDframe.name;
    dframe.width = curDframe.width;
    dframe.height = curDframe.height;
    //根据分辨率动态调整(摄像机配置,数据栈配置,比对库管理,算力管理,实时监控)
@@ -106,8 +105,8 @@
    let ratio = curDframe.width/curDframe.height;
    if(curDframe.name == 'cameraAccess' || curDframe.name == 'dataStack' || curDframe.name == 'library' || curDframe.name == 'analysisPower' || curDframe.name == 'cameraVideo'){
      //处理富余高度大于140的窗口
      if(window.screen.availHeight - curDframe.height > 140){
        dframe.height = (window.screen.availHeight - curDframe.height)/2 + curDframe.height;
      if(window.screen.availHeight - curDframe.height > 120){
        dframe.height = (window.screen.availHeight - curDframe.height)/2 + curDframe.height - 50;
        dframe.width = dframe.height*ratio;
      }
    }
@@ -117,6 +116,7 @@
    
    state.framesOrder = order;
    state.framesOffset = offset;
    debugger
    state.frames.push(dframe);

    return true;
@@ -140,7 +140,7 @@
      
      minOne.highlight = false;
      debugger
      minOne.screenshot = dock.screenshot;
      minOne.screenshot = dock.screenshot?dock.screenshot:minOne.screenshot;
      //找到minDocks最近打开的状态isShow为true的dock置为高亮
      let minLen = state.minDocks.length;
      for(var i = minLen-1; i >= 0; i--){
@@ -177,7 +177,6 @@
    state.notificationCenterVisible = visible;
  },
  closeFrame: (state, item) => {
    debugger
    state.frames.find(function (it, idx) {
      if (it.id === item.id) {
        state.frames.splice(idx, 1);

 src/pages/search/index/Searching.vue

@@ -275,6 +275,9 @@
    this.TreeDataPool.fetchTreeData();
  },
  mounted() {
    debugger
    //this.isShowUpload();
    console.log('search mounted')
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
@@ -453,6 +456,28 @@
    }
  },
  methods: {
    isShowUpload(){
      console.log('isShowUpload',this.VideoPhotoData.uploadDiaplay)
      this.getHeight();
      console.log("upload的值是：", this.VideoPhotoData.uploadDiaplay)
      if (this.VideoPhotoData.uploadDiaplay) {
        if (!this.VideoPhotoData.uploadType) {
          console.log("uploadDisplay中的刷新");
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false;
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic";
        }
      } else {
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    },
    resizeWidth(w) {
      this.defaultWidth = w;
    },

 src/pages/settings/components/BasicSetting.vue

@@ -76,7 +76,7 @@
            <template slot="title">
              <b class="tree-font">详细信息</b>
            </template>
            <el-menu-item-group class="item-group">
            <el-menu-item-group class="item-group desc-info">
              <el-row :gutter="gutter">
                <el-col :span="12" class="flex-box">
                  <div class="xiangqin-label">ID</div>
@@ -933,6 +933,16 @@
    width: 300px;
  }
}
.desc-info{
  margin-bottom: 14px;
  .flex-box{
    height: 40px;
    line-height: 40px;
    .xiangqin-label{
      width: 80px;
    }
  }
}
.menu-css,
.el-menu {
  border-right: none;