添加部分onvif代码

web_src/src/components/StreamProxyList.vue

@@ -10,6 +10,7 @@
 				</div>
 				<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
 					<el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button>
+					<el-button v-if="false" icon="el-icon-search" size="mini" style="margin-right: 1rem;" type="primary" @click="addOnvif">搜索ONVIF</el-button>
 				</div>
 				<devicePlayer ref="devicePlayer"></devicePlayer>
 				<el-table :data="streamProxyList" border style="width: 100%" :height="winHeight">
@@ -79,6 +80,7 @@
 					:total="total">
 				</el-pagination>
 			<streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
+			<onvifEdit ref="onvifEdit" ></onvifEdit>
 			</el-main>
 		</el-container>
 	</div>
@@ -86,6 +88,7 @@
 
 <script>
 	import streamProxyEdit from './dialog/StreamProxyEdit.vue'
+	import onvifEdit from './dialog/onvifEdit.vue'
 	import devicePlayer from './dialog/devicePlayer.vue'
 	import uiHeader from './UiHeader.vue'
 	export default {
@@ -93,6 +96,7 @@
 		components: {
 			devicePlayer,
 			streamProxyEdit,
+      onvifEdit,
 			uiHeader
 		},
 		data() {
@@ -113,7 +117,7 @@
 		},
 		mounted() {
 			this.initData();
-			// this.updateLooper = setInterval(this.initData, 10000);
+			this.updateLooper = setInterval(this.initData, 1000);
 		},
 		destroyed() {
 			this.$destroy('videojs');
@@ -155,6 +159,36 @@
 			addStreamProxy: function(){
 				this.$refs.streamProxyEdit.openDialog(null, this.initData)
 			},
+      addOnvif: function(){
+        this.getListLoading = true;
+        this.getListLoading = true;
+        this.$axios({
+          method: 'get',
+          url:`/api/onvif/search?timeout=3000`,
+        }).then((res) =>{
+          this.getListLoading = false;
+          if (res.data.code == 0 ){
+            if (res.data.data.length > 0) {
+              console.log(res.data.data)
+              this.$refs.onvifEdit.openDialog(res.data.data, (url)=>{
+                  if (url != null) {
+                    this.$refs.onvifEdit.close();
+                    this.$refs.streamProxyEdit.openDialog({type: "default", url: url, src_url: url}, this.initData())
+                  }
+              })
+            }else {
+              this.$message.success("未找到可用设备");
+            }
+        }else {
+            this.$message.error(res.data.msg);
+          }
+
+        }).catch((error)=> {
+          this.getListLoading = false;
+          this.$message.error(error.response.data.msg);
+        });
+
+			},
 			saveStreamProxy: function(){
 			},
 			play: function(row){

web_src/src/components/dialog/StreamProxyEdit.vue

@@ -139,9 +139,6 @@ export default {
       this.listChangeCallback = callback;
       if (proxyParam != null) {
         this.proxyParam = proxyParam;
-        this.onSubmit_text = "保存";
-      } else {
-        this.onSubmit_text = "立即创建";
       }
     },
     onSubmit: function () {
@@ -163,6 +160,7 @@ export default {
           that.showDialog = false;
           if (that.listChangeCallback != null) {
             that.listChangeCallback();
+            that.dialogLoading = false;
           }
         }
       }).catch(function (error) {

web_src/src/components/dialog/onvifEdit.vue

@@ -0,0 +1,121 @@
+<template>
+  <div id="onvif搜索" v-loading="isLoging">
+    <el-dialog
+      title="onvif搜索"
+      width="40%"
+      top="2rem"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div id="shared" style="margin-top: 1rem;margin-right: 100px;">
+        <el-form ref="form" :rules="rules" :model="form" label-width="140px" >
+          <el-form-item label="地址" prop="hostName" >
+            <el-select v-model="form.hostName" style="float: left; width: 100%" >
+              <el-option
+                v-for="item in hostNames"
+                :key="item"
+                :label="item.replace('http://', '')"
+                :value="item">
+              </el-option>
+            </el-select>
+
+          </el-form-item>
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form.username" clearable></el-input>
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form.password" clearable></el-input>
+          </el-form-item>
+          <el-form-item>
+            <div style="float: right;">
+              <el-button type="primary" @click="onSubmit" >确认</el-button>
+              <el-button @click="close">取消</el-button>
+            </div>
+
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "onvifEdit",
+  props: {},
+  computed: {},
+  created() {},
+  data() {
+    return {
+      listChangeCallback: null,
+      showDialog: false,
+      isLoging: false,
+      hostNames:[],
+      form: {
+        hostName: null,
+        username: "admin",
+        password: "admin123",
+      },
+
+      rules: {
+        hostName: [{ required: true, message: "请选择", trigger: "blur" }],
+        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    openDialog: function (hostNamesParam, callback) {
+      console.log(hostNamesParam)
+      this.showDialog = true;
+      this.listChangeCallback = callback;
+      if (hostNamesParam != null) {
+        this.hostNames = hostNamesParam;
+      }
+
+    },
+    onSubmit: function () {
+      console.log("onSubmit");
+      console.log(this.form);
+      this.$axios({
+        method: 'get',
+        url:`api/onvif/rtsp`,
+        params: {
+          hostname: this.form.hostName,
+          timeout: 3000,
+          username: this.form.username,
+          password: this.form.password,
+        }
+      }).then((res) => {
+        console.log(res.data)
+        if (res.data.code == 0) {
+          if (res.data.data != null) {
+            this.listChangeCallback(res.data.data)
+          }else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: "error",
+            });
+          }
+
+        }else {
+          this.$message({
+            showClose: true,
+            message: res.data.msg,
+            type: "error",
+          });
+        }
+      }).catch(function (error) {
+        console.log(error);
+      });
+    },
+    close: function () {
+      this.showDialog = false;
+      this.$refs.form.resetFields();
+    },
+  },
+};
+</script>