添加摄像机区域管理应用

hanbaoshan

2020-08-29 21a340c24815a55a07db2dc3d2e5a19e7de440cd

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

@@ -2,14 +2,22 @@
  <div class="tools-entry">

    <div class="entry-wrap">

      <div class="app-list clearFix">

          <div class="app" v-for="(item,index) in applist" :key="index">

            <div class="wrap">

              <div class="app-icon">

                <img :src="item.src" alt="">

              </div>

              <div class="app-name">{{item.name}}</div>

            </div> 
        <div

          class="app"

          v-for="dock in this.$store.state.desktop.docks"

          :key="dock.id"

          @click="dockClick(dock)"

        >

          <div class="wrap">

            <div class="app-icon">

              <img :src="dock.src" :alt="dock.alt" />

            </div>

            <div class="app-name">{{dock.title}}</div>

          </div>

        </div>

      </div>

      <div class="logo">

        <img :src="`${publicPath}images/desktop/desk-logo.png`" alt="">

      </div>

    </div>

  </div>

@@ -17,79 +25,158 @@


<script>

export default {

  name:'toolsEntry',

  data(){

  name: 'toolsEntry',

  data() {

    return {

      publicPath: process.env.BASE_URL,

      applist:[

        {src: `/images/app-mid/camera-access.png`, name:'摄像机接入'},

        {src: `/images/app-mid/datastack-config.png`, name:'数据栈配置'},

        {src: `/images/app-mid/DVR-access.png`, name:'硬盘录像机接入'},

        {src: `/images/app-mid/data-push.png`, name:'数据推送'},

        {src: `/images/app-mid/GB-config.png`, name:'GB28281配置'},

        {src: `/images/app-mid/scene-config.png`, name:'场景配置'},

        {src: `/images/app-mid/library.png`, name:'比对库管理'},

        {src: `/images/app-mid/poll.png`, name:'轮询管理'},

        {src: `/images/app-mid/algorithm-manage.png`, name:'算法管理'},

        {src: `/images/app-mid/algorithm-store.png`, name:'算法商城'},

        {src: `/images/app-mid/hashrate-manage.png`, name:'算力管理'},

        {src: `/images/app-mid/monitor.png`, name:'实时监控-在线播放'},

        {src: `/images/app-mid/search.png`, name:'检索-统计查询'},

        {src: `/images/app-mid/360.png`, name:'全景视频'},

        {src: `/images/app-mid/log-manage.png`, name:'日志管理'},

        {src: `/images/app-mid/device.png`, name:'设备管理'},

        {src: `/images/app-mid/settings.png`, name:'系统设置'},

        {src: `/images/app-mid/vindicate.png`, name:'系统维护'}

      ]

    }

  },

  mounted() {

    window.addEventListener('message', e => {

      console.log('msg')

      if (e.data && e.data.msg) {

        let msg = e.data.msg;

        // token 不合法, 退出

        if (msg === "logout") {

          location.assign("/");

          return;

        }



        // 打开检索, toSearch?showType=findByPic&targetId=108ba0bc-b0a1-433d-8e1e-d5d2e712b53b&picSmUrl=192.168.20.10:6700/47628,7cc869f3a9c714&compType=1

        if (msg.indexOf("toSearch") >= 0) {

          console.log('msg,search')

          let params = msg.substring(7);

          this.addFrameByName("search", params)

        }

      }

    })

  },

  methods: {

    dockClick(dock) {

      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,

          title: dock.title,

          url: dock.url

        });

        this.$store.commit('desktop/addMinDock', {

          id: dock.id,

          src: dock.src,

          alt: dock.title,

          type: "3",

          highlight: true,

          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);

      }

    },

    resetDockItem() {

      const dockItems = document.getElementsByClassName('dock-item');

      const dockMask = document.getElementsByClassName('dock-mask')[0];

      for (let i = 0; i < dockItems.length; i++) {

        dockItems[i].width = 60;

        if (dockItems[i].parentNode.nextElementSibling) {

          dockItems[i].parentNode.nextElementSibling.style.marginLeft = "-35px";

        }

      }

      dockMask.style.width = dockItems.length * 60 + 40 + 'px';

    },

    addFrameByName(name, params) {

      
      let dock = null;

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

        if (app.name === name) {

          dock = app;

        }

      });



      if (dock.isOpen) {

        this.$store.dispatch('desktop/closeFrame', dock);

      }

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

        id: dock.id,

        icon: dock.src,

        title: dock.title,

        url: dock.url + "?" + params

      });

      this.$store.commit('desktop/addMinDock', {

        id: dock.id,

        src: dock.src,

        alt: dock.title,

        type: "3",

        highlight: true,

        url: dock.url,

        screenshot: ''

      });

    }

  }

};

</script>



<style lang="scss">

  .tools-entry{

    //margin-top: 130px;

    position: absolute;

    top: 142px;

    left: 50%;

    transform: translateX(-50%);

    .entry-wrap{

      width: 1180px;

      padding: 0 60px;

      margin: 0 auto;

      .app-list{

        .app{

          width: 16.6%;

          margin-bottom: 54px;

          float: left;

          .wrap{

            .app-icon{

              text-align: center;

              line-height: 110px;

              width: 110px;

              height: 110px;

              margin: auto;

              img{

                vertical-align: middle;

                margin-right: -3px;

              }

            }

            .app-name{

              padding-top: 10px;

              text-align: center;

              font: Bold 16px/16px Microsoft JhengHei;

              color: #fff;

.tools-entry {

  //margin-top: 130px;

  position: absolute;

  top: 142px;

  left: 50%;

  transform: translateX(-50%);

  .entry-wrap {

    width: 1180px;

    padding: 0 60px;

    margin: 0 auto;

    .app-list {

      .app {

        width: 16.6%;

        margin-bottom: 54px;

        float: left;

        .wrap {

          .app-icon {

            text-align: center;

            line-height: 110px;

            width: 110px;

            height: 110px;

            margin: auto;

            img {

              vertical-align: middle;

              margin-right: -3px;

            }

          }

          
          &:hover{

            .app-icon{

              background: rgba(0,0,0,.4);

            }

          .app-name {

            padding-top: 10px;

            text-align: center;

            font: Bold 16px/16px Microsoft JhengHei;

            color: #fff;

          }

          
        }



        &:hover {

          .app-icon {

            background: rgba(0, 0, 0, 0.4);

          }

        }

      }

    }

    .logo{

      text-align: right;

      padding-right: 50px;

      user-select: none;

      img{

        user-select: none;

        -webkit-user-drag: none;

      }

    }

  }

}

</style>