合并摄像机接入和数据栈

zhangzengfei

2020-08-01 ac6d81e4f154ebc92ceb199e5ddaad9e43ef9818

合并摄像机接入和数据栈

 package.json

@@ -80,4 +80,4 @@
  "keywords": [],
  "author": "",
  "license": "ISC"
}
}

 public/images/test/video.png

 src/components/LeftNav.vue

@@ -6,12 +6,7 @@
      v-show="TreeDataPool.showTreeBox"
    >
      <el-tabs v-model="TreeDataPool.treeActiveName" type="border-card" @tab-click="handleClick">
        <el-tab-pane
          label="摄像机"
          name="camera"
          :style="`height:${height - 56}px;`"
          v-if="isShow(cameraAuth)"
        >
        <el-tab-pane label="摄像机" name="camera" :style="`height:${height - 56}px;`" v-if="showCam">
          <el-menu
            :default-openeds="openeds"
            background-color="#fff"
@@ -27,7 +22,6 @@
              <el-select
                v-model="TreeDataPool.searchCamType"
                placeholder="请选择"
                
                @change="searchAreaData"
              >
                <el-option
@@ -43,7 +37,6 @@
                placeholder="搜索"
                clearable
                @input="querySearchAsync('camera')"
                
              >
                <i
                  class="el-icon-search el-input__icon"
@@ -150,7 +143,7 @@
          label="数据栈"
          name="dataStack"
          :style="`height:${height - 56}px;`"
          v-if="isShow(dataStack)"
          v-if="showDataStack"
        >
          <div class="local-vedio-area">
            <!-- 搜索 -->
@@ -216,21 +209,9 @@
              </div>
              <LocalVedioList :dataList="TreeDataPool.localVedioList"></LocalVedioList>
            </div>
            <!-- 分页 -->
            <!-- <div class="paginationClass flex-box">
                <el-pagination
                  @current-change="refrash"
                  :current-page="TreeDataPool.localCurrentPage"
                  :page-size="TreeDataPool.localPageSize"
                  style="margin: 10px 0;"
                  :total="TreeDataPool.localTotal"
                ></el-pagination>
            </div>-->
          </div>
          <file-upload v-show="fileUploadBox" @close="fileUploadBox= false" />
        </el-tab-pane>
        <!-- <el-tab-pane label="本地图片" name="localPic" v-if="isShow('VIDEOCAMERA:image')">本地图片</el-tab-pane>
        <el-tab-pane label="本地音频" name="localAudio" v-if="isShow('VIDEOCAMERA:audio')">本地音频</el-tab-pane>-->
      </el-tabs>
    </div>
  </transition>
@@ -270,6 +251,15 @@
  },

  computed: {
    showTab() {
      return true;
    },
    showCam() {
      return this.appName === "Camera" || this.appName === "Search";
    },
    showDataStack() {
      return this.appName === "DataStack" || this.appName === "Search";
    },
    showLock() {
      return this.edit;
    },
@@ -366,33 +356,21 @@
    }
  },
  created() {
    if (this.isShow('VIDEOCAMERA:camera')) {
    if (this.showCam) {
      this.TreeDataPool.treeActiveName = "camera"
      this.TreeDataPool.fetchTreeData();

    } else {
      this.TreeDataPool.treeActiveName = "dataStack"
      this.DataStackPool.fetchFiles();

    }
    this.TreeDataPool.fetchTreeData().then(_ => {
      // todo
      // if (this.$route.path == '/Layout/Searching') {
      //   this.TreeDataPool.filterLocalVideoWell()
      // }
    });
  },
  methods: {
    isShow(authority) {
      if (this.isAdmin) {
        return true;
      } else if (this.buttonAuthority.indexOf("," + authority + ",") > -1) {
        return true;
      } else {
        return false;
      }
    },
    searchAreaData() {
      this.TreeDataPool.fetchTreeData();
    },
    searchDataStack() {
      debugger
      this.DataStackPool.fetchFiles();
    },
    lockSwitch() {
@@ -577,7 +555,7 @@
  .navTopSelect {
    display: flex;
    text-align: left;
    

    .el-input__icon {
      line-height: 34px;
    }

 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="'Video'" :height="screenHeight - 40"></left-nav>
        <left-nav :appName="app" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right" :style="`height:${screenHeight}px;`">
@@ -19,10 +19,15 @@
import RightSide from "./VideoManage"

export default {
  name: "SearchPage",
  name: "VideoManage",
  components: {
    LeftNav,
    RightSide
  },
  computed: {
    app() {
      return this.getUrlKey() !== null ? "DataStack" : "Camera"
    }
  },
  data() {
    return {
@@ -37,6 +42,12 @@
      })();
    };
  },
  methods: {
    getUrlKey() {
      let name = "dataStack"
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
  }
};
</script>


 src/pages/cameraAccess/index/main.ts

@@ -1,4 +1,4 @@
import Vue from 'vue';
import Vue from "vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
@@ -16,7 +16,7 @@

import App from './App.vue'

Vue.use(ElementUI)
Vue.use(ElementUI);
Vue.use(VueAwesomeSwiper as any);
Vue.use(VueWindow);


 src/pages/cameraVideo/index/App.vue

@@ -4,7 +4,7 @@
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
        <left-nav :appName="'Camera'" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right" :style="`height:${screenHeight}px;`">

 src/pages/datastack/components/DataStackInfo.vue

@@ -799,7 +799,7 @@
    vertical-align: middle;
  }
  .snapshot-video {
    background: url("../../../assets/img/video.png");
    background: url("/public/images/test/video.png");
    background-repeat: round;
  }
  .snapshot-image {

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

@@ -44,7 +44,6 @@
  },
  mounted() {
    window.addEventListener('message', e => {
      console.log(e)
      if (e.data && e.data.msg == "logout") {
        location.assign("/");
      }
@@ -100,8 +99,8 @@
  },
  directives: {
    drag(el) {
      
      if(el.dragLock){

      if (el.dragLock) {
        return
      }
      el.onmousedown = function (e) {
@@ -122,7 +121,7 @@
      }
    },
    resize(el, binding, vnode) {
      if(el.resizeLock){
      if (el.resizeLock) {
        return;
      }
      el.onmousedown = function (e) {

 src/pages/desktop/index/main.ts

@@ -2,7 +2,7 @@
import Vue from 'vue'
import App from './App.vue';
import store from './store'
import "@/assets/icons/awesome/font-awesome.css";
import "../../../assets/icons/awesome/font-awesome.css";

new Vue({
  el: '#app',

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

@@ -46,7 +46,7 @@
        "src": "../../images/app-mid/datastack-config.png",
        "alt": "datastack-config",
        "type": "2",
        "url": "/view/datastack",
        "url": "/view/cameraAccess?dataStack=1",
        "name": "数据栈配置",
        "width": 1876,
        "height": 750
@@ -67,7 +67,6 @@
        "url": "/view/datapush",
        "name": "数据推送"
      },
    
      {
        "id": "7",
        "src": "../../images/app-mid/library.png",

 src/pages/index/app.vue

@@ -220,6 +220,7 @@
  height: 402px;
  background: rgba(146, 208, 255, 0.23);
  border-radius: 4px;
  text-align: center;
  .login-logo {
    margin-top: -53px;
  }

 src/pages/index/main.ts

@@ -1,6 +1,11 @@
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
import "../../assets/css/common.scss"
import "../../assets/css/overried.scss"

import App from './App.vue'

Vue.use(ElementUI)

 src/pages/search/index/App.vue

@@ -4,15 +4,13 @@
      <div class="resize-bar"></div>
      <div class="resize-line"></div>
      <div class="resize-save">
        <left-nav :appName="'Video'" :height="screenHeight - 40"></left-nav>
        <left-nav :appName="'Search'" :height="screenHeight - 40"></left-nav>
      </div>
    </div>
    <div class="column-right" :style="`height:${screenHeight}px;`">
      <right-side />
    </div>

      <card-window></card-window>

    <card-window></card-window>
  </div>
</template>

@@ -62,8 +60,8 @@
  box-sizing: border-box;
  overflow: hidden;
}
.heigher-index{
  position:absolute;
.heigher-index {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;