vue2 海康威视插件引入

最新推荐文章于 2024-05-23 17:04:01 发布

zongzi_494

最新推荐文章于 2024-05-23 17:04:01 发布

阅读量1.1k

点赞数 1

分类专栏： vue页面文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/zongzi494/article/details/126019473

版权

vue页面专栏收录该内容

22 篇文章 1 订阅

订阅专栏

不过多介绍了…
index.html记得引入对应的js文件
插件版本我这个是1.5.1

<template>
  <div id="VideoNow">
    <div id="nowBox">
      <div id="VideoBigBox">
        <!-- 摄像头画幅的整分外部样式 -->
        <div class="videoBox"
             style="width: 100%; height: 100%">
          <div id="rightBox">
            <!-- <div class="VBoxTitle">
              <div class="Titlefont">摄像头</div>
              <p class="Eng">CAMERA</p>
            </div> -->

            <div id="searchBox">
              <el-input v-model="filterText"
                        placeholder="请输入关键字"
                        suffix-icon="el-icon-search"></el-input>
            </div>

            <div id="Totalnumber">
              <div class="itembox"
                   v-for="(item, index) in TotalnumberList"
                   :key="index">
                <div class="imgbox"
                     :class="item.type"></div>
                <div class="itembox2">
                  <span class="span1">{{ item.value }}</span>
                  <span class="span2">{{ item.name }}</span>
                </div>
              </div>
            </div>

            <div class='picbox1'>
              <el-tree :data="cameraList"
                       :show-checkbox="false"
                       node-key="id"
                       :props="defaultProps"
                       :default-expand-all="true"
                       ref="cameratree"
                       @check="cameraclick"
                       @node-click="camaranodeclick"
                       :filter-node-method="filterNode"
                       :render-content="CamarerenderContent">
              </el-tree>
            </div>

            <div class="personclass"
                 v-show="isshowperson&&detaillist.length">
              <i class="el-icon-close"
                 @click="isshowperson=false"></i>
              <el-row class="rowclass">
                {{itemname}}
              </el-row>
              <el-row class="rowclass"
                      :gutter="20">
                <el-col :span="6">姓名</el-col>
                <el-col :span="6">职位</el-col>
                <el-col :span="10">联系方式</el-col>
              </el-row>
              <el-row v-for="(item2,index2) in detaillist"
                      :key="index2"
                      class="rowclass"
                      :gutter="20">
                <el-tooltip class="item"
                            effect="dark"
                            :content="item2.name"
                            placement="bottom">
                  <el-col :span="6"
                          v-if="item2.name">{{item2.name}}</el-col>
                  <el-col :span="6"
                          v-else>-</el-col>
                </el-tooltip>
                <el-tooltip class="item"
                            effect="dark"
                            :content="item2.position"
                            placement="bottom">

                  <el-col :span="6"
                          v-if="item2.position">{{item2.position}}</el-col>
                  <el-col :span="6"
                          v-else>-</el-col>
                </el-tooltip>
                <el-tooltip class="item"
                            effect="dark"
                            :content="item2.phone"
                            placement="bottom">

                  <el-col :span="10"
                          v-if="item2.phone">{{item2.phone}}</el-col>
                  <el-col :span="10"
                          v-else>-</el-col>
                </el-tooltip>
              </el-row>
            </div>

            <div class='picbox2'>
              <div class="picBoxitem"
                   v-if="isshowItem">
                <div class="itemTitle"
                     v-for="(item, index) in newoptions"
                     :key="index"
                     @click="itemclick(item)">
                  <div class="imgbox2"></div>
                  <div v-if="item.status">{{ item.name }}</div>
                  <div v-else
                       class="outline">{{ item.name }}</div>
                </div>
              </div>
              <!-- 默认展示的tree组件 当搜索框的字改变的时候隐藏 -->
              <el-tree v-else
                       :data="treeList"
                       :show-checkbox="false"
                       node-key="id"
                       :props="defaultProps"
                       :default-expand-all="true"
                       ref="tree"
                       @check="checkeed"
                       @node-click="Nodeclick"
                       :render-content="renderContent">
              </el-tree>
            </div>
          </div>
          <!-- 摄像头画幅的实例dem -->
          <div id="playWnd"
               class="videobox2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getcameraList,
  queryAreaTree,
  hkviewCameraStat,
  hkviewqueryAllformer,
  getcameraInfo,
  queryCameraResource
} from "@/api/floodControlDrainage/floodControlDrainage";

export default {
  name: "videoNow",
  data: function () {
    return {
      // 获取的海康的所有的视频的接口
      TotalnumberList: [
        { value: "0", name: "总数", type: "zs" },
        { value: "0", name: "在线", type: "zx" },
        { value: "0", name: "离线", type: "lx" }
      ],
      filterText: "", //请输入内容的input框
      options: [],
      newoptions: [],
      value: "",
      defaultProps: {
        children: "childern",
        label: "name"
        // label: "name"+"总数"+"total"+"不在线"+"noOnlineCount"+"在线"+"onlineCount"
      },
      treeList: [],
      cameraList: [],
      loading: false, // 切站的时候显示loading
      oWebControl: null,
      plugKey: "",
      showVideos: {
        cameraIndexCode: "cdb4fb00381e49ada9539678d903720e", //监控点编号 新华大街
        streamMode: 0, //主子码流标识：0-主码流，1-子码流
        transMode: 1, //传输协议：0-UDP，1-TCP
        gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
        wndId: 1 //播放窗口序号
      },

      //显示的画面信息
      siteVal: "root000000", //选中的站点
      layoutVal: "-1", //选中的布局
      siteList: [],
      layoutList: [],
      width: 1500,
      height: 700,
      left: "",
      top: "",
      powerCameraStr: "",
      // 内网、公网 4个配置
      appkey: "",
      secret: "",
      ip: "",
      port: "",
      constindex: 1,
      layout: "1x1",
      isShow: true,
      Count: 0,
      isshowItem: false,
      number1: 0,

      isshowperson: false, //是否显示人员box

      detaillist: [],
      itemname: '', //点击的名字
      ischangyong: false,

      isxiaqu: false,
    };
  },
  methods: {
    // 左侧每一项进行的点击事件
    itemclick (item) {
      console.log("当前点击的item项目", item, item.status);
      // 调用新的点击事件的方法进行视频监控的展示
      this.newcheckeed(item);
    },

    // 获得在线数和离线数
    getCameraSta () {
      hkviewCameraStat().then(res => {
        if ((res.data.code = 200)) {
          this.TotalnumberList[0].value = res.data.data.total;
          this.TotalnumberList[1].value = res.data.data.onlineCount;
          this.TotalnumberList[2].value = res.data.data.noOnlineCOunt;
        }
      });
    },

    //获得视频的所有接口
    gethkviewqueryAll () {
      var formdata = new FormData();
      formdata.append("cameraName", this.filterText);
      formdata.append("type", this.number1);

      let params = {
        cameraName: this.filterText,
        type: this.number1,
      }

      hkviewqueryAllformer(params)
        .then(res => {
          if (res.data.code == 200) {
            this.options = res.data.data;
            this.newoptions = res.data.data;
          }
          // console.log("获得视频接口", this.options);

          this.options.map(item => {
            if (item.status != 1) {
              return (item.name = item.name + "[离线]");
            }
          });
          this.newoptions.map(item => {
            if (item.status != 1) {
              return (item.name = item.name + "[离线]");
            }
          });
        });
    },
    renderContent (h, { node, data, store }) {
      // 如果data.label为查看浏览，则禁用复选框
      // console.log("chakan ", data, node);

      if (data.status === 0) {
        return (
          <span class="custom-tree-node">
            <span class="distext">{node.label}[离线]</span>
          </span>
        );
      }
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      );
    },

    CamarerenderContent (h, { node, data, store }) {
      // console.log(node.label);
      console.log(node);
      if (data.childern.length == 0) {
        // console.log(data.cameraUser);
        if (data.status == 0) {
          // console.log(JSON.parse(data.cameraUser));

          if (JSON.parse(data.cameraUser)[0].name) {
            return (
              <span class="custom-tree-node">
                <span class="distext">{node.label}[离线]</span>
                <span>
                  <el-button size="mini" type="text" on-click={() => this.opendetail(data)}>详情</el-button>
                </span>
              </span>
            );
          } else {
            return (
              <span class="custom-tree-node">
                <span class="distext">{node.label}[离线]</span>
              </span>
            );
          }
        } else {
          if (JSON.parse(data.cameraUser)[0].name) {
            return (
              <span class="custom-tree-node">
                <span >{node.label}</span>
                <span>
                  <el-button size="mini" type="text" on-click={() => this.opendetail(data)}>详情</el-button>
                </span>
              </span>
            );
          } else {
            return (
              <span class="custom-tree-node">
                <span >{node.label}</span>
              </span>
            );
          }
        }
      } else {
        return (
          <span class="custom-tree-node">
            <span>{node.label}</span>
          </span>
        );
      }
    },

    opendetail (data) {
      // console.log('opendetail', data);
      this.detaillist = []
      this.itemname = ''
      this.isshowperson = true
    },

    // 新的
    camaranodeclick (item, b, c) {
      b.checked = !b.checked;
      this.cameraclick(item, b.checked)
    },
    // 自定义新的
    cameraclick (item, state) {
      console.log(item, state);

      if (item.name == '常用' && state == true) {
        this.ischangyong = true

        console.log(document.querySelector('.picbox1'));

        if (this.isxiaqu) {//关闭状态
          document.querySelector('.picbox2').setAttribute('style', "height:30px")
          document.querySelector('.picbox1').setAttribute('style', "height:30px")
        } else {
          document.querySelector('.picbox1').setAttribute('style', "height:30px")
          document.querySelector('.picbox2').setAttribute('style', "height:calc(100% - 132px)")
        }
      } else if (item.name == '常用' && state == false) {
        this.ischangyong = false

        if (this.isxiaqu) {
          document.querySelector('.picbox1').setAttribute('style', "height:calc(100% - 132px)")
          document.querySelector('.picbox2').setAttribute('style', "height:30px")
        } else {
          document.querySelector('.picbox1').setAttribute('style', "height:calc((100% - 102px) / 2)")
          document.querySelector('.picbox2').setAttribute('style', "height:calc((100% - 102px) / 2)")
        }
      }


      this.itemname = item.name

      let data = {
        id: item.id
      }

      getcameraInfo(data).then(res => {
        if (res.data.code == 200) {
          // console.log('detaillist', res.data.data);
          res.data.data.map(item => {
            this.detaillist = (JSON.parse(item.cameraUser))
          })

          console.log('detaillist', this.detaillist);

          if (!this.isshowperson) {
            if (res.data.data[0].indexCode) {
              var video = {
                cameraIndexCode: res.data.data[0].indexCode, //监控点编号
                // cameraIndexCode: '0df66711c0d6481e9d76d71be4e5cd47', //监控点编号
                streamMode: 0, //主子码流标识：0-主码流，1-子码流
                transMode: 1, //传输协议：0-UDP，1-TCP
                gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
                wndId: -1 //播放窗口序号
              };

              this.showVideos = video;
              this.getClickAction();

            } else {
              this.$message({
                message: "此处没有返回视频数据，请确认是否安装并联系后台处理",
                type: "warning"
              });
            }
          }

        }
      })

    },

    Nodeclick (item, b, c) {
      // console.log("点击节点", item, b, c);
      b.checked = !b.checked;
      this.checkeed(item, b.checked);
    },
    // tree的点击方法
    checkeed (item, state) {

      if (item.name == '市辖区自建' && state == true) {//开关2的关闭动作
        this.isxiaqu = true

        if (this.ischangyong) {//关闭状态
          document.querySelector('.picbox1').setAttribute('style', "height:30px")
          document.querySelector('.picbox2').setAttribute('style', "height:30px")
        } else {
          document.querySelector('.picbox2').setAttribute('style', "height:30px")
          document.querySelector('.picbox1').setAttribute('style', "height:calc(100% - 132px)")
        }

      } else if (item.name == '市辖区自建' && state == false) {
        this.isxiaqu = false

        if (this.ischangyong) {
          document.querySelector('.picbox2').setAttribute('style', "height:calc(100% - 132px)")
          document.querySelector('.picbox1').setAttribute('style', "height:30px")
        } else {
          document.querySelector('.picbox2').setAttribute('style', "height:calc((100% - 102px) / 2)")
          document.querySelector('.picbox1').setAttribute('style', "height:calc((100% - 102px) / 2)")
        }
      }

      if (item.status === 0) {
        this.$message({
          message: "设备已离线",
          type: "warning"
        });
      } else {
        var formData = new FormData();
        formData.append("indexCode", item.regionIndexCode);
        queryCameraResource({ indexCode: item.regionIndexCode })
          .then(res => {
            console.log('你为什么会有？？？？？？？？？？');

            if (res.data.data.length != 0) {
              item.childern = res.data.data;
            }
          });

        if (item.indexCode) {
          if (state) {
            var video = {
              cameraIndexCode: item.indexCode, //监控点编号
              // cameraIndexCode: '0df66711c0d6481e9d76d71be4e5cd47', //监控点编号
              streamMode: 0, //主子码流标识：0-主码流，1-子码流
              transMode: 1, //传输协议：0-UDP，1-TCP
              gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
              wndId: -1 //播放窗口序号
            };

            this.showVideos = video;
            this.getClickAction();
          } else {
          }
        } else if (item.treeCode == 0) {
          return null;
        } else {
          this.$message({
            message: "此处没有返回视频数据，请确认是否安装并联系后台处理",
            type: "warning"
          });
        }
      }
    },

    newcheckeed (item) {
      if (item.status === 0) {
        this.$message({
          message: "设备已离线",
          type: "warning"
        });
      } else if (item.indexCode) {
        var video = {
          cameraIndexCode: item.indexCode, //监控点编号
          // cameraIndexCode: '0df66711c0d6481e9d76d71be4e5cd47', //监控点编号

          streamMode: 0, //主子码流标识：0-主码流，1-子码流
          transMode: 1, //传输协议：0-UDP，1-TCP
          gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
          wndId: -1 //播放窗口序号
        };
        this.showVideos = video;
        // if (this.oWebControl != null) {
        //   this.oWebControl.JS_HideWnd();
        //   this.oWebControl.JS_Disconnect();
        //   this.oWebControl.JS_DestroyWnd();
        // }
        // this.initPlugin();
        this.getClickAction();
        console.log("点击了节点", item.indexCode);
      } else {
        // if (this.oWebControl != null) {
        //   this.oWebControl.JS_HideWnd();
        //   this.oWebControl.JS_Disconnect();
        //   this.oWebControl.JS_DestroyWnd();
        // }
        this.$message({
          message: "此处没有返回视频数据，请确认是否安装并联系后台处理",
          type: "warning"
        });
      }
    },

    // 获取视频监控点
    loadTreeData () {
      this.treeList = []

      queryAreaTree()
        .then(response => {
          // console.log(response.data.data[0]);

          if (response.data.code === 200) {
            this.treeList.push(response.data.data[0]);
            // this.chuli(this.treeList);
            console.log("00000", this.treeList);
          } else {
            this.$message({
              type: "warning",
              message: response.data.message
            });
          }
        })
        .catch(response => { });
    },
    // //数据处理
    chuli (list) {
      if (list.length > 0) {
        for (var j = 0; j < list.length; j++) {
          list[j].childern.map(item => {
            if (item.childern.length > 0) {
              item.name = `${item.name}(总数:${item.indexSize} 在线:${item.onLine})`
            }
          })
        }
      }
    },

    /* 创建插件实例 */
    initPlugin () {
      const dll = { dllPath: "./VideoPluginConnect.dll" };
      this.oWebControl = new WebControl({
        szPluginContainer: "playWnd", // 指定容器id
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid

        cbConnectSuccess: () => {
          this.oWebControl.JS_StartService("window", dll).then(() => {
            // 设置视频 web 插件消息回调
            this.oWebControl.JS_SetWindowControlCallback({
              // cbIntegrationCallBack: msg => { }
            });
            //启动插件服务成功
            this.oWebControl
              .JS_CreateWnd("playWnd", this.width, this.height)
              .then(() => {
                //JS_CreateWnd创建视频播放窗口，宽高可设定
                this.initVideo(this.oWebControl); // 创建播放实例成功后初始化
                console.log("启动插件成功！");
              });
          });
        },
        //插件服务启动失败，弹框提示
        cbConnectError: () => {
          this.oWebControl = null;

          this.Count++;
          if (this.Count < 2) {
            WebControl.JS_WakeUp("VideoWebPlugin://");

            setTimeout(() => {
              this.initPlugin();
            }, 8000);
          } else {
            // this.open();
          }
          console.log("创建插件失败");
        }
      });
    },
    /* 获取公钥 */
    initVideo (oWebControl) {
      const params = {
        funcName: "getRSAPubKey",
        argument: JSON.stringify({ keyLength: 1024 })
      };

      this.oWebControl.JS_RequestInterface(params).then(res => {
        if (res.responseMsg.data) {
          this.plugKey = res.responseMsg.data;
          this.getVideoConfig(this.oWebControl);
        }
      });
    },
    /* 视频插件配置  插件初始化*/

    getVideoConfig (oWebControl) {
      this.powerCameraStr = sessionStorage.getItem("powerCamera");
      // console.log(this.powerCameraStr, "this.powerCameraStr");

      const { offsetWidth, offsetHeight } = document.getElementById("playWnd");
      const configObj = {
        funcName: "init",
        argument: JSON.stringify({
          appkey: this.appkey, //API网关提供的appkey
          secret: this.setEncrypt(this.secret), //API网关提供的secret
          ip: this.ip, //API网关IP地址z
          playMode: 0, //播放模式（决定显示预览还是回放界面）
          port: this.port, //端口
          snapDir: "C:\\SnapDir", //抓图存储路径
          videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径
          layout: this.layout, //布局
          enableHTTPS: 1, //是否启用HTTPS协议
          encryptedFields: "secret", //加密字段


          showToolbar: 1, //是否显示工具栏
          showSmart: 1, //是否显示智能信息
          // buttonIDs: "0,16,256,257,258,259,260,512,515,516,517,768,769" //自定义工具条按钮  旧的
          buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"  //自定义工具条按钮 新的
          // buttonIDs: this.powerCameraStr === null ? "0" : this.powerCameraStr //自定义工具条按钮powerCameraStr
        })
      };
      oWebControl.JS_RequestInterface(configObj).then(() => {
        oWebControl.JS_Resize(this.width, this.height);
        this.getClickAction();
      });
    },
    /* 视频流RSA加密 */
    setEncrypt (value) {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.plugKey);
      return encrypt.encrypt(value);
    },
    /* 视频预览 */
    getClickAction () {
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify(this.showVideos)
      });
    },
    /* 显示视频实例 */
    getShowStruction () {
      if (this.oWebControl == null) {
        this.initPlugin();
      } else {
        this.oWebControl.JS_ShowWnd();
      }
    },
    /* 销毁视频实例 */
    getDestruction () {
      this.oWebControl.JS_HideWnd();
    },

    windowScroll () {
      this.oWebControl.JS_Resize(this.width, this.height);
    },
    windowResize () {
      var div = document.getElementById("playWnd");
      this.width = div.offsetWidth; // 返回元素的总宽度
      this.height = div.offsetHeight; // 返回元素的总高度
      if (this.oWebControl) {
        this.oWebControl.JS_Resize(this.width, this.height);
      }
    },

    getcameraList () {
      getcameraList().then(res => {
        if (res.data.code == 200) {
          console.log('res.data.data', res.data.data);
          this.cameraList = res.data.data

          this.chuli(this.cameraList);

        }
      })
    },

    filterNode (value, data) {
      console.log(value, data);
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
  },
  created () {
    let urlString = window.location.href;
    let YeZhuIP = this.$store.state.OwnerIp;
    let NatIp = this.$store.state.NatIp;

    // this.appkey = "22293881"; //外网发布
    // this.secret = "12Fj7DSxrH8zbQP3USnB"; //
    // this.ip = "172.16.40.121"; //
    // this.port = 443; //
    //旧的


    this.appkey = "22249418"; //外网发布
    this.secret = "n3CbMTGNbJSWTkhhDiSj"; //
    this.ip = "10.255.200.101"; //
    this.port = 443; //新的


    // 经开的
    // this.appkey = "21011071"; //
    // this.secret = "5UUzHM2xz7u0srRhU6DX"; //
    // this.ip = "47.97.35.33"; //
    // this.port = 36099; //
  },
  mounted: function () {
    this.getcameraList()
    this.loadTreeData();
    this.getCameraSta();
    this.gethkviewqueryAll();
    var div = document.getElementById("playWnd");
    this.width = div.offsetWidth; // 返回元素的总宽度
    this.height = div.offsetHeight; // 返回元素的总高度
    // 设置top left
    const bodyW = $(window).width();
    const bodyH = $(window).height();
    this.left = bodyW / 2 - this.width / 2;
    this.top = bodyH / 2 - this.height / 2;

    this.initPlugin();

    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener("resize", this.windowResize);

    // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
    window.addEventListener("scroll", this.windowScroll);
  },
  watch: {
    filterText (val) {
      this.$refs.cameratree.filter(val);

      if (val) {
        this.isshowItem = true;
        this.gethkviewqueryAll();
        // var reg = new RegExp(val, "ig");
        // this.newoptions = this.options.filter(item => {
        //   //匹配某个字段
        //   return item.name.match(reg);
        // });
      } else {
        this.isshowItem = false;
        this.gethkviewqueryAll();
        this.loadTreeData();


        // this.newoptions = this.options;
      }
    },
    //动态监听路由变化 -以便动态更改导航背景色事件效果等
    $route (to, from) {
      if (to.fullPath === "/realtimeVideo") {
        // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
        window.addEventListener("resize", this.windowResize);
        // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
        window.addEventListener("scroll", this.windowScroll);
        //如果切换调回视频监控模块，重新唤醒海康web插件
        if (this.oWebControl == null) {
          this.initPlugin();
        } else {
          this.oWebControl.JS_ShowWnd();
          this.oWebControl.JS_Resize(this.width, this.height);
        }
      } else {
        if (this.oWebControl != null) {
          this.oWebControl.JS_HideWnd();
        }
      }
    }
  },
  beforeDestroy () {
    if (this.oWebControl != null) {
      this.oWebControl.JS_HideWnd();
      this.oWebControl.JS_Disconnect();
      this.oWebControl.JS_DestroyWnd();
    }
  }
};
</script>

<style lang="scss" scoped>
#VideoNow {
  width: 100%;
  height: 100%;
}
.photolistP {
  width: 100%;
  height: 100%;
}
#camera {
  width: 240px;
  box-sizing: border-box;
  height: 100%;
  margin-left: 20px;
  float: left;
  background-color: rgba(0, 0, 0, 0.35);
}
#nowBox {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35);
}

.Eng {
  font-size: 14px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.3;
}
.Eng1 {
  float: left;
  font-size: 14px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.3;
}
#VideoBigBox {
  position: relative;
  width: 100%;
  height: 100%;
}
.Titlefont {
  font-size: 20px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 0 4px #fff;
}

#NumBtnBox {
  height: 60px;
  float: right;
}
.NumBtn {
  float: left;
  width: 19px;
  height: 19px;
  cursor: pointer;
  margin: 20px 10px;
}
.videoBox {
  float: left;
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
  position: relative;
  overflow: hidden;
}
.videoBQ {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

.videobox2 {
  position: absolute;
  right: 0;
  width: calc(100% - 410px);
  height: calc(100% - 10px);
  border: 1px solid #333;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  overflow: hidden;
}
.playonebox {
  text-align: center;
  padding-top: 34px;
}
.playonebox .img1 {
  margin: 0 10px;
}
.playone {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.playone p {
  margin: 2px 10px;
}
.his {
  height: 20px;
  width: 20px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.35);
  position: absolute;
  right: 20px;
  top: 20px;
}

.playdot {
  height: 30px;
  width: 20px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  position: absolute;
  right: 20px;
  bottom: 40px;
  cursor: pointer;
  padding: 0;
}
.playdot p {
  margin: 0;
  height: 10px;
  width: 20px;
}
.select1 {
  float: left;
  margin-right: 20px;
}
.select2 {
  float: left;
}
.videoBoxSelect {
  border: 1px solid aqua !important;
}
.camarePlayBox {
  width: 200px;
  height: 100%;
  /* background: #111; */
  background-color: rgba(0, 0, 0, 0.35);

  position: absolute;
  top: 0;
  left: 0;
}
.camarePlayBox span {
  position: absolute;
  bottom: 6px;
  right: 10px;
  color: gray;
}

#rightBox {
  position: relative;
  width: 400px;
  height: 100%;
  float: left;
  background: #081624;
  border: 1px solid #006fff;
  padding: 21px;
  box-sizing: border-box;
  box-shadow: 0px 0px 10px 1px #006fff inset;
}

.VBoxTitle {
  width: 100%;
  height: 65px;
  padding: 10px 10px;
  box-sizing: border-box;
}
.picbox1 {
  position: relative;
  width: 100%;
  height: calc((100% - 102px) / 2);
  // border-top: 1px solid;
  overflow: auto;
}

.picbox2 {
  position: relative;
  width: 100%;
  height: calc((100% - 102px) / 2);
  border-top: 1px solid #06bcff;
  overflow: auto;
}

.picBoxitem {
  width: 100%;
  padding: 3px 0;
}

.itemTitle {
  display: flex;
  font-size: 13px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #a9adb2;
  cursor: pointer;
  height: 24px;
}
.outline {
  color: #d87474;
}

.Eng {
  font-size: 14px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.3;
}
.Titlefont {
  font-size: 20px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  color: white;
}

/deep/ .el-tree {
  background: none;
}

/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #b0c4de;
}

::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  position: relative;
  color: #fff;
}

/deep/ .el-tree-node__content:hover {
  background-color: #53565b;
}

::v-deep .custom-tree-node .distext {
  color: #d87474 !important;
  pointer-events: none;
  cursor: default;
}

::v-deep .custom-tree-node .discheckbox {
  position: absolute;
  top: 0;
  left: -22px;
}
#Totalnumber {
  width: 100%;
  height: 50px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // border-bottom: 1px solid #06bcff;
}
.itembox {
  width: calc(100% / 3);
  display: flex;
  justify-content: space-around;
}
.itembox2 {
  display: flex;
  flex-direction: column;
}
.span1 {
  font-size: 20px;
  font-weight: 400;
  color: #fdc608;
}
.span2 {
  font-size: 14px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #b8e5fa;
}

#searchBox {
  width: 100%;
  height: 50px;
  z-index: 1000;
}
/deep/ .el-select {
  width: 100%;
}
/deep/ .el-input {
  border: 1px solid #006fff;
  border-radius: 2px;
}
/deep/ .el-input__inner {
  background-color: #081624 !important;
  color: #fff;
}

.imgbox2 {
  background: url("~@/assets/images/siping-fangxun/videonow/shexiangotu.png")
    no-repeat center;
  width: 20px;
  height: 20px;
}

/deep/ .el-tree-node__expand-icon {
  background: url("~@/assets/images/siping-fangxun/videonow/shexiangotu.png")
    no-repeat;
  margin-right: 5px;
}
/deep/ .el-icon-search:before {
  color: transparent;
  cursor: pointer;
  background: url("~@/assets/images/siping-fangxun/videonow/ss.png") no-repeat;
}

/deep/ .el-icon-caret-right:before {
  content: "";
}
/deep/ .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}

.zs {
  background: url("~@/assets/images/siping-fangxun/videonow/zs.png");
}
.zx {
  background: url("~@/assets/images/siping-fangxun/videonow/zx.png");
}
.lx {
  background: url("~@/assets/images/siping-fangxun/videonow/lx.png");
}

.imgbox {
  width: 40px;
  height: 40px;
}

.personclass {
  color: #fff;
  position: absolute;
  left: 50%;
  top: 37%;
  width: 90%;
  height: 41%;
  transform: translate(-50%, -50%);
  padding: 10px 21px 10px 20px;
  border: 1px solid #3b5082;
  z-index: 999;
  background: linear-gradient(0deg, #041437 0%, #041437 100%);
}

.el-icon-close {
  position: absolute;
  right: 5px;
  color: #00ffff;
  font-size: 25px;
  cursor: pointer;
  z-index: 999;
}

.rowclass {
  margin-top: 10px;
  text-align: center;
}

/deep/ .el-col {
  overflow: hidden; //溢出隐藏
  text-overflow: ellipsis; //超出显示省略号
  white-space: nowrap; //强制文本在一行内显示
}

/deep/.el-tree__empty-block {
  background: #081624;
}

/deep/ .el-tree-node.is-current > .el-tree-node__content {
  background: #2a363c;
}
</style>