左侧树高度超出显示滚动条,鼠标移入应用小图标显示实时快照,样式调整

hanbaoshan

2020-08-13 aaf3198eb598932a788561d715bdf2a91330d259

左侧树高度超出显示滚动条,鼠标移入应用小图标显示实时快照,样式调整

 src/components/searching/SearchLeft.vue

@@ -334,6 +334,8 @@
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    // display: inline-block;
    // vertical-align: middle;
    img {
      width: 100%;
      cursor: pointer;

 src/components/searching/UploadImg.vue

@@ -307,6 +307,9 @@
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
  .el-button--info{
    color: #222;
  }
  .upload-area {
    width: 300px;
    height: 100%;
@@ -352,7 +355,10 @@
      padding: 5px;
      box-sizing: border-box;
      position: relative;
      display: inline-block;
      vertical-align: middle;
      img {
        width: 100%;
        object-fit: contain;
        cursor: pointer;
        border-radius: 3px;

 src/components/searching/uploadDialog.vue

@@ -316,6 +316,8 @@
      padding: 5px;
      box-sizing: border-box;
      position: relative;
      // display: inline-block;
      // vertical-align: middle;
      img {
        width: 100%;
        cursor: pointer;

 src/components/searching/uploadForModel.vue

@@ -319,6 +319,8 @@
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    // display: inline-block;
    // vertical-align: middle;
    img {
      width: 100%;
      cursor: pointer;

 src/pages/analysisPower/index/App.vue

@@ -60,7 +60,7 @@
          border
          :cell-style="cellStyle"
        >
          <el-table-column label="序号" type="index" align="center" width="100px"></el-table-column>
          <el-table-column label="序号" type="index" align="center" width="60px"></el-table-column>
          <el-table-column label="摄像机名称" align="center" show-overflow-tooltip sortable>
            <template slot-scope="scope">
              <span
@@ -70,7 +70,7 @@
          </el-table-column>
          <el-table-column label="摄像机地址" prop="addr" align="center" show-overflow-tooltip sortable></el-table-column>
          <el-table-column label="摄像机IP" prop="ip" align="center" width="130px" sortable></el-table-column>
          <el-table-column label="摄像机类型" align="center" width="110px" sortable>
          <el-table-column label="摄像机类型" align="center" width="120px" sortable>
            <template slot-scope="scope">
              <span>{{scope.row.run_type | cameraType}}</span>
            </template>
@@ -118,7 +118,7 @@
      title="算力设置"
      :visible.sync="drawer"
      direction="rtl"
      size="350px"
      size="450px"
      custom-class="e-drawer"
      :before-close="closeDrawer"
    >
@@ -573,9 +573,16 @@

.e-drawer {
  // margin-top: 150px;

  font-family: PingFangSC-Medium;
  font-size: 14px;
  &:focus{
    outline: none;
  }
  .el-dialog__close{
    &:focus{
      outline: none!important;
    }
  }
  .dawer_details {
    text-align: left;
    margin-left: 70px;
@@ -596,7 +603,17 @@
  }

  .el-drawer__header {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    font-size: 16px;
    margin-bottom: 0px;
    span{
      border: none!important;
      border-image-width: 0!important;
      &:focus{
        outline: none;
      }
    }
  }
}
</style>

 src/pages/cameraAccess/index/App.vue

@@ -4,7 +4,7 @@
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="app" :edit="editTree"></left-nav>
        <left-nav :appName="app" :edit="editTree" :height="screenHeight"></left-nav>
      </div>
    </div>
    <div class="column-right" >
@@ -63,7 +63,10 @@
  height: 100%;
}
.column-left {
  height: inherit;
  height: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;
  // height: inherit;
  background-color: #fff;
  position: relative;
}

 src/pages/datapush/index/App.vue

@@ -94,8 +94,10 @@
</script>

<style lang="scss">

.ev-left-list {
  border-right: 1px solid #e0e0e0;
  min-width: 384px;
}

.ant-divider,

 src/pages/datapush/index/LeftList.vue

@@ -194,6 +194,7 @@
  padding-top: 20px;
  //height: 50em;
  .left-list {
    min-width:340px;
    position: absolute;
    left: 15px;
    top: 10px;

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

@@ -124,6 +124,15 @@
          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();
@@ -221,6 +230,7 @@
}

.d-frame .d-frame-title {
  /* min-width: 378px; */
  height: 30px;
  background-color: #e0e0e0;
  border-radius: 4px 4px 0 0;

 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;

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

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



<script>



export default {

  name: 'toolsEntry',

  data() {

@@ -66,6 +67,8 @@
          alt: dock.title,

          type: "3",

          highlight: true,

          url: dock.url,

          screenshot: ''

        });

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

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


 src/pages/desktop/index/mock/userData.json

@@ -132,7 +132,7 @@
        "type": "2",
        "url": "/view/vindicate",
        "title": "系统维护",
        "width": 758,
        "width": 760,
        "height": 534
      }
    ]

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

@@ -121,7 +121,14 @@

    return true;
  },
  
  shotscreen: (state, {id,src}) => {
    let curFrame = state.frames.find(frame => frame.id == id);
    if(!curFrame.isShow){
      return
    }
    let curDock = state.minDocks.find(one => one.id == id);
    curDock.screenshot = src;
  },
  addMinDock: (state, dock) => {
    let ids = state.minDocks.map(item => item.id);
    
@@ -132,6 +139,7 @@
      let minOne = state.minDocks.find(one => one.id == dock.id);
      
      minOne.highlight = false;
      debugger
      minOne.screenshot = dock.screenshot;
      //找到minDocks最近打开的状态isShow为true的dock置为高亮
      let minLen = state.minDocks.length;

 src/pages/gb28181/index/App.vue

@@ -326,6 +326,9 @@
    },
    menuOpen(){
      
    },
    menuClose(){
      
    }
  }
}

 src/pages/library/components/carList.vue

@@ -1294,8 +1294,8 @@
  .el-drawer.ltr,
  .el-drawer.rtl {
    width: 27% !important;
    height: 90%;
    top: 9%;
    //height: 90%;
    //top: 9%;
    .el-drawer__header {
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
@@ -1445,9 +1445,9 @@
.el-drawer.rtl {
  min-width: 450px;
  width: 25% !important;
  height: 90%;
  min-height: 1100px;
  top: 9%;
  //height: 90%;
  //min-height: 1100px;
  //top: 9%;
  .el-drawer__header {
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
@@ -1460,7 +1460,8 @@
}

.drawerSpace {
  height: 900px;
  height: calc(100% - 140px);
  box-sizing: border-box;
  margin-bottom: 30px;
  overflow-y: scroll;
  .uploadLine {

 src/pages/library/components/personList.vue

@@ -1031,6 +1031,12 @@
  border-bottom: none;
  // border-bottom: none;
}
.el-dialog{
  min-width: 515px;
  .el-button--info{
    color: #222;
  }
}
.el-dialog__header {
  padding: 20px 0 10px;
  text-align: left;

 src/pages/search/index/Searching.vue

@@ -172,7 +172,68 @@
        </div> -->
      </div>
    </div>

    <hsc-window-style-metal class="windown-model">
      <hsc-window
        v-for="(item, index) in CardList.addBaseList"
        :closeButton="true"
        @closebuttonclick="closeWindow(index)"
        :key="index"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        style="background:white; height:475px"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
        positionHint="center"
        :isScrollable="true"
        :minWidth="662"
        :minHeight="479"
        :maxWidth="10000"
        :maxHeight="7000"
        :height="defaultHeight"
        :width="defaultWidth"
      >
        <div class="addToBase">
          <div class="topLabel">加入底库</div>
          <div class="items">
            <div class="lable">
              <p>黑名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectBlacks" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.blackList" :key="index">
                  <el-checkbox
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="items">
            <div class="lable">
              <p>白名单 ></p>
            </div>
            <div class="baseList">
              <el-checkbox-group v-model="VideoPhotoData.selectWhites" @change="blackAngWhite">
                <div class="base" v-for="(item, index) in VideoPhotoData.whiteList" :key="index">
                  <el-checkbox
                    :label="item.value"
                    :title="item.title"
                    :disabled="item.disabled"
                  >{{item.title}}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
          <div class="buttons">
            <el-button type="primary" @click="saveAddBase(item, index)">保存</el-button>
            <el-button type="default" @click="closeWindow(index)">取消</el-button>
          </div>
        </div>
      </hsc-window>
    </hsc-window-style-metal>
  </div>
</template>

@@ -473,6 +534,7 @@
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd(item) {
      debugger
      this.CardList.addBaseList.push(item)
    },
    handleClose(done) {

 src/pages/settings/index/App.vue

@@ -62,6 +62,7 @@
<style lang="scss">
.s-system-manage {
  width: 100% !important;
  min-width: 1067px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;

 src/pages/vindicate/index/App.vue

@@ -388,6 +388,7 @@
<style lang="scss">
.s-system-manage {
  width: 100% !important;
  min-width: 759px;
  box-sizing: border-box;
  padding: 10px;
  // background-color: #e9ebf2;