海康威视web结合Vue+Java

技术点

前端iView + webVideoCtrl.js(有改动)
后台Java

基本功能

  1. 实时预览
    海康威视web结合Vue+Java_第1张图片
    动态配置NVR参数,获取NVR下的所有摄像头(支持多nvr同时预览),提供窗口配置功能,记录当前窗口所对应的的摄像头,下次进入页面可以手动载入
  2. 录像回看
    海康威视web结合Vue+Java_第2张图片
    海康威视web结合Vue+Java_第3张图片
    回放功能支持进度拖拽
  3. 设备管理
    海康威视web结合Vue+Java_第4张图片
    海康威视web结合Vue+Java_第5张图片
    海康威视web结合Vue+Java_第6张图片

提供NVR设备管理功能

其他

由于涉及到业务方面,其余功能页面就不展示了,有兴趣做海康威视web开发的可以一起讨论

前端代码

  1. 实时监控,修改了webVideoCtrl.js(文件内容太长传不上),NVR数据获取通过后台(也可以直接前端写死模拟数据)
<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader content="实时预览:实时预览摄像头获取的图像信息" hidden-breadcrumb />
      <Card :bordered="false" dis-hover :style="treeGardHeight" class="tree_grid_card ivu-mt">
        <div>
          <Row :gutter="24">
            <i-col span="4">
              <div style="font-weight:bold">选择矩阵:div>
              <Select
                v-model="frames"
                placeholder="请选择窗口大小"
                @on-change="framesChange"
                style="width:120px;"
              >
                <Option :value="1" :key="1">1x1Option>
                <Option :value="2" :key="2">2x2Option>
                <Option :value="3" :key="3">3x3Option>
                <Option :value="4" :key="4">4x4Option>
                <Option :value="5" :key="5">5x5Option>
                <Option :value="6" :key="6">6x6Option>
                <Option :value="7" :key="7">7x7Option>
                <Option :value="8" :key="8">8x8Option>
              Select>
              <div style="font-weight:bold">设备信息:div>
              <Tree :data="nvrTree" @on-select-change="treeSelectChange">Tree>
            i-col>
            <i-col :xl="20" :lg="20" :md="20" :sm="20" :xs="20">
              <Form :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="24" type="flex" justify="start">
                  
                  
                  
                  
                  <i-col span="100%" type="flex" justify="start">
                    <Button
                      type="primary"
                      @click="startRealPlay(0)"
                      style="margin-bottom: 10px"
                    >开始预览Button>
                    <Button
                      type="primary"
                      @click="stopRealPlay('',0)"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >停止预览Button>
                    <Button
                      type="primary"
                      @click="startRecord"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >开始录像Button>
                    <Button
                      type="primary"
                      @click="stopRecord"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >停止录像Button>
                    <Button
                      type="primary"
                      @click="CapturePic"
                      style="margin-left: 10px;margin-bottom: 10px"
                    >抓 图Button>

                    <Poptip confirm transfer title="是否覆盖配置?" @on-ok="saveConf(row,index)">
                      <Button type="warning" style="margin-left: 10px;margin-bottom: 10px">保存配置Button>
                    Poptip>
                    <Poptip confirm transfer title="是否载入配置?" @on-ok="loadConf(row,index)">
                      <Button type="warning" style="margin-left: 10px;margin-bottom: 10px">载入配置Button>
                    Poptip>
                    
                    
                  i-col>
                Row>
              Form>
            i-col>

            <i-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
              <div>
                <div id="divPlugin" class="plugin">div>
              div>
            i-col>
          Row>
        div>
      Card>
    div>
  div>
template>

<script>
import { WebVideoCtrl } from "../../../../libs/hkv/webVideoCtrl";
import $ from "jquery";
import { getList, getDetail, remove, add, update } from "@/api/haa/haanvrinfo";
import { mapState } from "vuex";

export default {
  components: {},
  data() {
    return {
      g_iWndIndex: 0,
      frames: 2,
      value: 1,
      iWidth: 1500,
      iHeight: 700,
      iProtocol: 1,
      iStreamType: 1,
      bZeroChannel: false,
      nAnalogChannel: 0,
      nZeroChannel: 0,
      nvrTree: [], // NVR挂载摄像头树形结构数据
      treeObj: {}, // 当前选中的树节点
      loginNvrs: [], // 登录的NVR信息
      runViewWinds: [], // 正在实时浏览的窗口索引,从0开始
      g_bEnableDraw: false, //是否能绘制图形
      allWindData: [],
    };
  },
  created: function () {},
  computed: {
    ...mapState("admin/layout", ["isMobile"]),
    labelWidth() {
      return this.isMobile ? undefined : 10;
    },
    labelPosition() {
      return this.isMobile ? "top" : "left";
    },
    treeGardHeight() {
      let sty = {};
      sty["height"] = $(window).height() - 170 + "px";
      return sty;
    },
  },
  mounted: function () {
    setTimeout(() => {
      this.videoInitPlugin();
    }, 100);
  },
  destroyed: function () {
    var that = this;
    for (let i = 0; i < that.loginNvrs.length; i++) {
      var iRet = WebVideoCtrl.I_Logout(
        that.loginNvrs[i].ip + "_" + that.loginNvrs[i].port
      );
      if (0 == iRet) {
        console.info("退出登录成功");
      } else {
        console.error("退出登录失败");
      }
    }
    // 退出页面停止不成功,只能停止当前选中窗口,改为每次预览前停止该窗口
    // for (let i = 0; i < that.runViewWinds.length; i++) {
    //     that.stopRealPlay(that.runViewWinds[i]);
    // }
  },
  methods: {
    framesChange: function () {
      var that = this;
      WebVideoCtrl.I_ChangeWndNum(that.frames);
    },
    treeSelectChange: function (e) {
      if (e instanceof Array && e.length === 0) {
        this.treeObj = {};
        return;
      }
      if (!e[0].children) {
        this.treeObj = e[0];
      } else {
        this.treeObj = {};
      }
    },
    downLoadPlugin() {
      window.location.href = "/api/mm-behavior/downloadWeb";
    },
    videoInitPlugin: function () {
      var iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件,请下载WebComponentsKit.exe安装!");
        this.downLoadPlugin();
        return;
      }
      this.initPlugin();
    },
    initPlugin: function () {
      var that = this;
      WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
        bWndFull: true, //是否支持单窗口双击全屏
        iWndowType: 2,
        myCbSelWnd: function (xmlDoc) {
          that.g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert(
              "检测到新的插件版本,双击开发包目录里的WebComponentsKit.exe升级!"
            );
            return;
          }
          setTimeout(() => {
            getList(0, 10000).then((res) => {
              var d = res.records;
              for (let i = 0; i < d.length; i++) {
                that.nvrLogin(d[i]);
              }
            });
          }, 70);
          // 读取配置
          if (localStorage.getItem("loadConf") == "yes") {
            setTimeout(() => {
              localStorage.removeItem("loadConf");
              that.frames = parseInt(localStorage.getItem("frames"));
              that.framesChange();
              that.allWindData = JSON.parse(
                localStorage.getItem("allWindData")
              );
              console.info(
                "载入配置 ===> " + localStorage.getItem("allWindData")
              );
              console.info("长度 ===> " + that.allWindData.length);
              for (let i in that.allWindData) {
                if (that.allWindData[i].iWndIndex) {
                  that.startRealPlay(1, that.allWindData[i]);
                }
              }
            }, 1000);
          }
        },
      });
    },
    nvrLogin(obj) {
      var that = this;
      var res = WebVideoCtrl.I_Login(
        obj.ip,
        1,
        obj.port,
        obj.username,
        obj.password,
        {
          // async: false,
          success: function (xmlDoc) {
            console.log("登录成功");
            // var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
            // console.info(xmlDoc);
            that.loginNvrs.push(obj);
            setTimeout(() => {
              that.getChannelInfo(obj.ip, obj.port);
            }, 30);
          },
          error: function () {
            console.log("登录失败");
          },
        }
      );
    },
    getChannelInfo(nvrIp, nvrPort) {
      var that = this;
      // var szIP = that.szIP;
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(nvrIp, {
        // async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel");
          var nvrObj = { title: nvrIp, expand: false, children: [] };
          $.each(oChannels, function (i, val) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text(),
              online = $(this).find("online").eq(0).text(),
              port = $(this).find("managePortNo").eq(0).text(),
              ipAddress = $(this).find("ipAddress").eq(0).text();
            // console.info("id:" + id + " name:" + name + " online:" + online);
            if ("false" == online) {
              // 过滤禁用的数字通道
              return true;
            }
            nvrObj.children.push({
              title: name,
              id: id,
              channel: id,
              ip: ipAddress,
              nvrIp: nvrIp,
              port: port,
              nvrPort: nvrPort,
            });
          });
          that.nvrTree.push(nvrObj);
          console.log("获取模拟通道成功!");
        },
        error: function (error) {
          console.log(
            "获取模拟通道失败!" + error + WebVideoCtrl.I_GetLastError()
          );
        },
      });
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(nvrIp, {
        // async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
          var nvrObj = { title: nvrIp, expand: false, children: [] };
          $.each(oChannels, function (i, val) {
            var id = $(this).find("id").eq(0).text(),
              name = $(this).find("name").eq(0).text(),
              online = $(this).find("online").eq(0).text(),
              port = $(this).find("managePortNo").eq(0).text(),
              ipAddress = $(this).find("ipAddress").eq(0).text();
            // console.info("id:" + id + " name:" + name + " online:" + online);
            if ("false" == online) {
              // 过滤禁用的数字通道
              return true;
            }
            nvrObj.children.push({
              title: name,
              id: id,
              channel: id,
              ip: ipAddress,
              nvrIp: nvrIp,
              port: port,
              nvrPort: nvrPort,
            });
          });
          that.nvrTree.push(nvrObj);
          console.log("获取数字通道成功!");
        },
        error: function () {
          WebVideoCtrl.I_GetLastError();
          console.log("获取数字通道失败!" + WebVideoCtrl.I_GetLastError());
        },
      });
      // 零通道
      // WebVideoCtrl.I_GetZeroChannelInfo(szIP, {
      //     async: false,
      //     success: function(xmlDoc) {
      //         var oChannels = $(xmlDoc).find("ZeroVideoChannel");
      //         that.nZeroChannel = oChannels;
      //         console.log("获取零通道成功!");
      //     },
      //     error: function() {
      //         console.log("获取零通道失败!" + WebVideoCtrl.I_GetLastError());
      //     }
      // });
    },
    startRealPlay: function (type, data) {
      var that = this;
      let szDeviceIdentify;
      let iWndIndex;
      let iChannelID;
      if (type == 0) {
        if (!that.treeObj.id) {
          this.$Message.error("请选择监控通道");
          return;
        }
        szDeviceIdentify = that.treeObj.nvrIp + "_" + that.treeObj.nvrPort;
        iWndIndex = that.g_iWndIndex;
        iChannelID = that.treeObj.channel;
      } else {
        szDeviceIdentify = data.szDeviceIdentify;
        iWndIndex = data.iWndIndex;
        iChannelID = data.iChannelID;
      }
      that.stopRealPlay(iWndIndex, type);
      // 手动预览前先停止该窗口
      console.log("startRealPlay@@: ", szDeviceIdentify, iWndIndex, iChannelID);
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iWndIndex: iWndIndex,
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: false,
        success: function () {
          let currentWindData = {
            iWndIndex: iWndIndex,
            szDeviceIdentify: szDeviceIdentify,
            iChannelID: iChannelID,
          };
          if (that.allWindData.length == 0) {
            that.allWindData.push(currentWindData);
          }
          for (let k = 0; k < that.allWindData.length; k++) {
            let confWindData = that.allWindData[k];
            // 如果配置相同,不放入缓存
            if (
              confWindData.iWndIndex == iWndIndex &&
              confWindData.szDeviceIdentify == szDeviceIdentify &&
              confWindData.iChannelID == iChannelID
            ) {
              break;
            }
            if (k == that.allWindData.length - 1) {
              that.allWindData.push(currentWindData);
            }
          }
          // that.runViewWinds.push(iWndIndex);
          that.$Message.success("开始预览成功");
        },
        error: function (status, xmlDoc2) {
          console.log(xmlDoc2); //不能删除
          if (status === 403) {
            console.log("szInfo 设备不支持Websocket取流!");
          } else {
            that.$Message.error("开始预览失败 ");
          }
        },
      });
    },

    stopRealPlay: function (windIndex, type) {
      var that = this;
      var index;
      if (windIndex == "") {
        index = that.g_iWndIndex;
      } else {
        index = windIndex;
      }
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(index);
      if (oWndInfo != null) {
        WebVideoCtrl.I_Stop({
          success: function () {
            // 从所有窗口展示数据中清除
            if (type == 0) {
              for (let i = 0; i < that.allWindData.length; i++) {
                if (that.allWindData[i].iWndIndex == index) {
                  that.allWindData.splice(i, i + 1);
                  break;
                }
              }
            }
            // var arr = that.arrayRemove(that.runViewWinds, index);
            console.info("停止预览成功");
          },
          error: function () {
            console.error("停止预览失败");
          },
        });
      }
    },
    saveConf: function () {
      var that = this;
      localStorage.setItem("frames", that.frames);
      localStorage.setItem("allWindData", JSON.stringify(that.allWindData));
      console.info("保存配置 ===> " + JSON.stringify(that.allWindData));
      console.info("长度 ===> " + that.allWindData.length);
      that.$Message.success("保存配置成功");
    },
    loadConf: function () {
      var that = this;
      if (!localStorage.getItem("allWindData")) {
        that.$Message.error("没有可以载入的配置");
        return;
      }
      // 传入标识,载入配置
      localStorage.setItem("loadConf", "yes");
      location.reload();
      this.$router.go(0);
    },
    CapturePic: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        var xmlDoc = WebVideoCtrl.I_GetLocalCfg();
        var szCaptureFileFormat = " 0";
        if (xmlDoc != null) {
          szCaptureFileFormat = $(xmlDoc)
            .find("CaptureFileFormat")
            .eq(0)
            .text();
        }
        var szChannelID = that.treeObj.channel,
          szPicName =
            oWndInfo.szDeviceIdentify +
            "_" +
            szChannelID +
            "_" +
            new Date().getTime();
        szPicName += "0" === szCaptureFileFormat ? ".jpg" : ".bmp";
        var iRet = WebVideoCtrl.I_CapturePic(szPicName, {
          bDateDir: true, //是否生成日期文件
        });
        if (0 == iRet) {
          that.$Message.success("抓图成功");
        } else {
          that.$Message.error("抓图失败");
        }
      }
    },

    startRecord: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        var szChannelID = that.treeObj.channel,
          szFileName =
            oWndInfo.szDeviceIdentify +
            "_" +
            szChannelID +
            "_" +
            new Date().getTime();

        WebVideoCtrl.I_StartRecord(szFileName, {
          bDateDir: true, //是否生成日期文件
          success: function () {
            that.$Message.success("开始录像成功");
          },
          error: function () {
            that.$Message.error("开始录像失败");
          },
        });
      }
    },

    stopRecord: function () {
      var that = this;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        WebVideoCtrl.I_StopRecord({
          success: function () {
            that.$Message.success("停止录像成功");
          },
          error: function () {
            that.$Message.error("停止录像失败");
          },
        });
      }
    },
    arrayRemove: function (arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] == val) {
          arr.splice(i, 1);
          return arr;
        }
      }
    },
    showOPInfo: function (szInfo, status, xmlDoc) {
      var that = this;
      var szTip =
        "
" + that.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo; if (typeof status != "undefined" && status != 200) { var szStatusString = $(xmlDoc).find("statusString").eq(0).text(); var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text(); if ("" === szSubStatusCode) { szTip += "(" + status + ", " + szStatusString + ")"; } else { szTip += "(" + status + ", " + szSubStatusCode + ")"; } } szTip += "
"
; $("#opinfo").html(szTip + $("#opinfo").html()); }, encodeString: function (str) { if (str) { return str .replace(/&/g, "&") .replace(/, "<") .replace(/>/g, ">"); } else { return ""; } }, loadXML: function (szXml) { if (null == szXml || "" == szXml) { return null; } var oXmlDoc = null; if (window.DOMParser) { var oParser = new DOMParser(); oXmlDoc = oParser.parseFromString(szXml, "text/xml"); } else { oXmlDoc = new ActiveXObject("Microsoft.XMLDOM"); oXmlDoc.async = false; oXmlDoc.loadXML(szXml); } return oXmlDoc; }, getSnapPolygon: function (szId) { var that = this; var szInfo = WebVideoCtrl.I_GetSnapPolygonInfo(that.g_iWndIndex); var oXML = that.loadXML(szInfo); if (typeof szId === "undefined") { return oXML; } else { var iIndex = -1; var aNodeList = $(oXML).find("SnapPolygon"); if (aNodeList.length > 0) { $.each(aNodeList, function (i) { if ($(this).find("id").text() === szId) { iIndex = i; return false; } }); } return iIndex; } }, clickEnableDraw: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { var iRet = WebVideoCtrl.I_SetPlayModeType(6); // 多边形模式 if (0 === iRet) { that.g_bEnableDraw = true; that.$Message.success("启用绘制成功!"); } else { that.$Message.error("启用绘制失败!"); } } }, loadXML: function (szXml) { if (null == szXml || "" == szXml) { return null; } var oXmlDoc = null; if (window.DOMParser) { var oParser = new DOMParser(); oXmlDoc = oParser.parseFromString(szXml, "text/xml"); } else { oXmlDoc = new ActiveXObject("Microsoft.XMLDOM"); oXmlDoc.async = false; oXmlDoc.loadXML(szXml); } return oXmlDoc; }, clickDisableDraw: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { var iRet = WebVideoCtrl.I_SetPlayModeType(0); // 预览模式 if (0 === iRet) { that.g_bEnableDraw = false; that.showOPInfo(that.g_bEnableDraw); that.$Message.success("禁用绘制成功!"); } else { that.$Message.error("禁用绘制失败!"); } } }, clickAddSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } var szId = $("#snapId").val(); var szName = that.encodeString($("#snapName").val()); var szInfo = ""; szInfo += ""; szInfo += ""; szInfo += "" + szId + ""; // [1, 32] szInfo += "1"; szInfo += "17"; // [MinClosed, 17] szInfo += "4"; // [4, 17] szInfo += "#" + szId + "#" + szName + ""; szInfo += "false"; szInfo += "02550"; szInfo += ""; szInfo += ""; szInfo += ""; var iRet = WebVideoCtrl.I_SetSnapPolygonInfo(that.g_iWndIndex, szInfo); if (0 === iRet) { that.showOPInfo("窗口" + that.g_iWndIndex + "添加图形成功!"); } else if (-1 === iRet) { that.showOPInfo("窗口" + that.g_iWndIndex + "添加图形失败!"); } else if (-2 === iRet) { alert("参数错误!"); } else if (-3 === iRet) { alert("图形个数达到上限!"); } else if (-4 === iRet) { alert("图形ID已存在!"); } WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, 2); } }, toXMLStr: function (oXmlDoc) { var szXmlDoc = ""; try { var oSerializer = new XMLSerializer(); szXmlDoc = oSerializer.serializeToString(oXmlDoc); } catch (e) { try { szXmlDoc = oXmlDoc.xml; } catch (e) { return ""; } } if (szXmlDoc.indexOf(") == -1) { szXmlDoc = "" + szXmlDoc; } return szXmlDoc; }, clickDelSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } var szId = $("#snapId").val(); var iIndex = that.getSnapPolygon(szId); if (iIndex != -1) { var oXML = that.getSnapPolygon(); $(oXML).find("SnapPolygon").eq(iIndex).remove(); var szInfo = that.toXMLStr(oXML); WebVideoCtrl.I_ClearSnapInfo(that.g_iWndIndex); WebVideoCtrl.I_SetSnapPolygonInfo(that.g_iWndIndex, szInfo); WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, 3); } else { alert("图形ID不存在!"); } } }, clickEditSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } var iRet = WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, 3); if (0 === iRet) { that.$Message.success("窗口" + that.g_iWndIndex + "编辑图形成功!"); } else { that.$Message.error("窗口" + that.g_iWndIndex + "编辑图形失败!"); } } }, clickStopSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } var iRet = WebVideoCtrl.I_SetSnapDrawMode(that.g_iWndIndex, -1); if (0 === iRet) { that.$Message.success("窗口" + that.g_iWndIndex + "停止编辑成功!"); } else { that.$Message.error("窗口" + that.g_iWndIndex + "停止编辑失败!"); } } }, clickGetSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } var xmlDoc = WebVideoCtrl.I_GetLocalCfg(); var szDrawFormat = " 0"; if (xmlDoc != null) { szDrawFormat = $(xmlDoc).find("CaptureFileFormat").eq(0).text(); } var szChannelID = that.treeObj.channel, szPicName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime(); szPicName += "0" === szDrawFormat ? ".jpg" : ".bmp"; var iRet = WebVideoCtrl.I_CapturePic(szPicName, { bDateDir: true, //是否生成日期文件 }); if (0 == iRet) { that.$Message.success("绘图保存 success"); } else { that.$Message.error("绘图保存 error"); } var szInfo = WebVideoCtrl.I_GetSnapPolygonInfo(that.g_iWndIndex); alert(szInfo); } }, clickSetSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } WebVideoCtrl.I_ClearSnapInfo(that.g_iWndIndex); var szInfo = ""; szInfo += ""; szInfo += ""; szInfo += "1"; szInfo += "1"; szInfo += "#1#设置1"; szInfo += "true"; szInfo += "02550"; szInfo += ""; szInfo += "0.7379030.229730"; szInfo += "0.9475810.804054"; szInfo += "0.3629030.777027"; szInfo += ""; szInfo += ""; szInfo += ""; szInfo += "2"; szInfo += "1"; szInfo += "#2#设置2"; szInfo += "true"; szInfo += "02550"; szInfo += ""; szInfo += "0.4516130.216216"; szInfo += "0.4475810.729730"; szInfo += "0.1169350.554054"; szInfo += ""; szInfo += ""; szInfo += ""; var iRet = WebVideoCtrl.I_SetSnapPolygonInfo(that.g_iWndIndex, szInfo); if (0 === iRet) { that.$Message.success("窗口" + that.g_iWndIndex + "设置图形成功!"); } else if (-1 === iRet) { that.$Message.error("窗口" + that.g_iWndIndex + "设置图形失败!"); } else if (-2 === iRet) { alert("参数错误!"); } else if (-3 === iRet) { alert("图形个数达到上限!"); } else if (-4 === iRet) { alert("图形ID已存在!"); } } }, clickDelAllSnapPolygon: function () { var that = this; var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex); if (oWndInfo != null) { if (!that.g_bEnableDraw) { return; } var iRet = WebVideoCtrl.I_ClearSnapInfo(that.g_iWndIndex); if (0 === iRet) { that.$Message.success("窗口" + that.g_iWndIndex + "清空图形成功!"); } else { that.showOPInfo("窗口" + that.g_iWndIndex + "清空图形失败!"); } } }, // 格式化时间 dateFormat: function (oDate, fmt) { var o = { "M+": oDate.getMonth() + 1, //月份 "d+": oDate.getDate(), //日 "h+": oDate.getHours(), //小时 "m+": oDate.getMinutes(), //分 "s+": oDate.getSeconds(), //秒 "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度 S: oDate.getMilliseconds(), //毫秒 }; if (/(y+)/.test(fmt)) { fmt = fmt.replace( RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length) ); } for (var k in o) { if (new RegExp("(" + k + ")").test(fmt)) { fmt = fmt.replace( RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length) ); } } return fmt; }, }, }; script> <style scoped> .aniu { display: flex; flex-flow: row wrap; justify-content: space-between; /*width: 180px;*/ } .aniu li { list-style: none; } .ivu-btn { width: 88px; } style>

你可能感兴趣的:(海康威视web结合Vue+Java)