支持推流通道预导入

web_src/src/components/PushVideoList.vue

@@ -8,6 +8,13 @@
 				<div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
 					<span style="font-size: 1rem; font-weight: bold;">推流列表</span>
 				</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-upload2" size="mini" style="margin-right: 1rem;" type="primary" @click="importChannel">通道导入</el-button>
+          <el-button icon="el-icon-download" size="mini" style="margin-right: 1rem;" type="primary" >
+            <a style="color: #FFFFFF; text-align: center; text-decoration: none" href="/static/file/推流通道导入.zip" download='推流通道导入.zip' >下载模板</a>
+          </el-button>
+
+        </div>
 				<devicePlayer ref="devicePlayer"></devicePlayer>
 				<addStreamTOGB ref="addStreamTOGB"></addStreamTOGB>
 				<el-table :data="pushList" border style="width: 100%" :height="winHeight">
@@ -54,6 +61,7 @@
 					:total="total">
 				</el-pagination>
 			<streamProxyEdit ref="streamProxyEdit" ></streamProxyEdit>
+			<importChannel ref="importChannel" ></importChannel>
 			</el-main>
 		</el-container>
 	</div>
@@ -64,13 +72,15 @@
 	import devicePlayer from './dialog/devicePlayer.vue'
 	import addStreamTOGB from './dialog/addStreamTOGB.vue'
 	import uiHeader from './UiHeader.vue'
+	import importChannel from './dialog/importChannel.vue'
 	export default {
 		name: 'pushVideoList',
 		components: {
 			devicePlayer,
 			addStreamTOGB,
 			streamProxyEdit,
-			uiHeader
+			uiHeader,
+      importChannel,
 		},
 		data() {
 			return {
@@ -196,8 +206,12 @@
 				s = t.getSeconds();
 				// 可根据需要在这里定义时间格式
 				return y+'-'+(m<10?'0'+m:m)+'-'+(d<10?'0'+d:d)+' '+(h<10?'0'+h:h)+':'+(i<10?'0'+i:i)+':'+(s<10?'0'+s:s);
-			}
+			},
+      importChannel: function () {
+        this.$refs.importChannel.openDialog(()=>{
 
+        })
+      },
 		}
 	};
 </script>

web_src/src/components/dialog/importChannel.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="importChannel" v-loading="isLoging">
+    <el-dialog
+      title="导入通道数据"
+      width="30rem"
+      top="2rem"
+      :append-to-body="true"
+      :close-on-click-modal="false"
+      :visible.sync="showDialog"
+      :destroy-on-close="true"
+      @close="close()"
+    >
+      <div>
+        <el-upload
+          class="upload-box"
+          drag
+          action="debug/api/push/upload"
+          name="file"
+          >
+          <i class="el-icon-upload"></i>
+          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          <div class="el-upload__tip" slot="tip">只能上传 csv / xls / xlsx 文件</div>
+        </el-upload>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "importChannel",
+  computed: {},
+  created() {},
+  data() {
+    return {
+      submitCallback: null,
+      showDialog: false,
+      isLoging: false,
+      isEdit: false,
+    };
+  },
+  methods: {
+    openDialog: function (callback) {
+      this.showDialog = true;
+      this.submitCallback = callback;
+    },
+    onSubmit: function () {
+      console.log("onSubmit");
+      console.log(this.form);
+      this.$axios({
+        method:"post",
+        url:`/api/platform/catalog/${!this.isEdit? "add":"edit"}`,
+        data: this.form
+      })
+        .then((res)=> {
+          if (res.data.code === 0) {
+            console.log("添加/修改成功")
+            if (this.submitCallback)this.submitCallback()
+          }else {
+            this.$message({
+              showClose: true,
+              message: res.data.msg,
+              type: "error",
+            });
+          }
+          this.close();
+        })
+        .catch((error)=> {
+          console.log(error);
+        });
+    },
+    close: function () {
+      this.showDialog = false;
+      this.$refs.form.resetFields();
+    },
+  },
+};
+</script>
+<style>
+.upload-box{
+  text-align: center;
+}
+</style>