增加新版本web页面

web/src/views/streamProxy/edit.vue

@@ -0,0 +1,216 @@
+<template>
+  <div id="StreamProxyEdit" style="width: 100%">
+    <div class="page-header">
+      <div class="page-title">
+        <el-page-header content="编辑拉流代理信息" @back="close" />
+      </div>
+    </div>
+    <el-tabs tab-position="top" style="padding-top: 1rem">
+      <el-tab-pane label="拉流代理信息" style="padding-top: 1rem">
+        <el-form ref="streamProxy" :rules="rules" :model="streamProxy" label-width="140px" style="width: 50%; margin: 0 auto">
+          <el-form-item label="类型" prop="type">
+            <el-select
+              v-model="streamProxy.type"
+              style="width: 100%"
+              placeholder="请选择代理类型"
+            >
+              <el-option key="默认" label="默认" value="default" />
+              <el-option key="FFmpeg" label="FFmpeg" value="ffmpeg" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="应用名" prop="app">
+            <el-input v-model="streamProxy.app" clearable />
+          </el-form-item>
+          <el-form-item label="流ID" prop="stream">
+            <el-input v-model="streamProxy.stream" clearable />
+          </el-form-item>
+          <el-form-item label="拉流地址" prop="url">
+            <el-input v-model="streamProxy.srcUrl" clearable />
+          </el-form-item>
+          <el-form-item label="超时时间(秒)" prop="timeoutMs">
+            <el-input v-model="streamProxy.timeout" clearable />
+          </el-form-item>
+          <el-form-item label="节点选择" prop="rtpType">
+            <el-select
+              v-model="streamProxy.relatesMediaServerId"
+              style="width: 100%"
+              placeholder="请选择拉流节点"
+              @change="mediaServerIdChange"
+            >
+              <el-option key="auto" label="自动选择" value="" />
+              <el-option
+                v-for="item in mediaServerList"
+                :key="item.id"
+                :label="item.id"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="streamProxy.type=='ffmpeg'" label="FFmpeg命令模板" prop="ffmpegCmdKey">
+            <el-select
+              v-model="streamProxy.ffmpegCmdKey"
+              style="width: 100%"
+              placeholder="请选择FFmpeg命令模板"
+            >
+              <el-option
+                v-for="item in Object.keys(ffmpegCmdList)"
+                :key="item"
+                :label="ffmpegCmdList[item]"
+                :value="item"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="拉流方式(RTSP)" prop="rtspType">
+            <el-select
+              v-model="streamProxy.rtspType"
+              style="width: 100%"
+              placeholder="请选择拉流方式"
+            >
+              <el-option label="TCP" value="0" />
+              <el-option label="UDP" value="1" />
+              <el-option label="组播" value="2" />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="无人观看" prop="noneReader">
+            <el-radio-group v-model="streamProxy.noneReader">
+              <el-radio :label="0">不做处理</el-radio>
+              <el-radio :label="1">停用</el-radio>
+              <el-radio :label="2">移除</el-radio>
+            </el-radio-group>
+
+          </el-form-item>
+          <el-form-item label="其他选项">
+            <div style="float: left;">
+              <el-checkbox v-model="streamProxy.enable" label="启用" />
+              <el-checkbox v-model="streamProxy.enableAudio" label="开启音频" />
+              <el-checkbox v-model="streamProxy.enableMp4" label="录制" />
+            </div>
+
+          </el-form-item>
+          <el-form-item>
+            <div style="float: right;">
+              <el-button type="primary" :loading="saveLoading" @click="onSubmit">保存</el-button>
+              <el-button @click="close">取消</el-button>
+            </div>
+
+          </el-form-item>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane v-if="streamProxy.id" label="国标通道配置">
+        <CommonChannelEdit ref="commonChannelEdit" :data-form="streamProxy" :cancel="close" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import CommonChannelEdit from '../common/CommonChannelEdit'
+
+export default {
+  name: 'ChannelEdit',
+  components: {
+    CommonChannelEdit
+  },
+  props: ['value', 'closeEdit'],
+  data() {
+    return {
+      saveLoading: false,
+      streamProxy: this.value,
+      mediaServerList: {},
+      ffmpegCmdList: {},
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        app: [{ required: true, message: '请输入应用名', trigger: 'blur' }],
+        stream: [{ required: true, message: '请输入流ID', trigger: 'blur' }],
+        srcUrl: [{ required: true, message: '请输入要代理的流', trigger: 'blur' }],
+        timeout: [{ required: true, message: '请输入FFmpeg推流成功超时时间', trigger: 'blur' }],
+        ffmpegCmdKey: [{ required: false, message: '请输入FFmpeg命令参数模板（可选）', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    value(newValue, oldValue) {
+      this.streamProxy = newValue
+    }
+  },
+  created() {
+    console.log(this.streamProxy)
+    this.$store.dispatch('server/getOnlineMediaServerList')
+      .then((data) => {
+        this.mediaServerList = data
+      })
+  },
+  methods: {
+    onSubmit: function() {
+      this.saveLoading = true
+      this.noneReaderHandler()
+      if (this.streamProxy.id) {
+        this.$store.dispatch('streamProxy/update', this.streamProxy)
+          .then((data) => {
+            this.saveLoading = false
+            this.$message.success({
+              showClose: true,
+              message: '保存成功'
+            })
+            this.streamProxy = data
+          })
+          .catch((error) => {
+            this.$message.error({
+              showClose: true,
+              message: error
+            })
+            this.saveLoading = false
+          }).finally(() => {
+            this.saveLoading = false
+          })
+      } else {
+        this.$store.dispatch('streamProxy/add', this.streamProxy)
+          .then((data) => {
+            this.saveLoading = false
+            this.$message.success({
+              showClose: true,
+              message: '保存成功'
+            })
+            this.streamProxy = data
+          })
+          .catch((error) => {
+            this.$message.error({
+              showClose: true,
+              message: error
+            })
+            this.saveLoading = false
+          })
+          .finally(() => {
+            this.saveLoading = false
+          })
+      }
+    },
+    close: function() {
+      this.closeEdit()
+    },
+    mediaServerIdChange: function() {
+      if (this.streamProxy.relatesMediaServerId !== 'auto') {
+        this.$store.dispatch('streamProxy/queryFfmpegCmdList', this.streamProxy.relatesMediaServerId)
+          .then((data) => {
+            this.ffmpegCmdList = data
+            this.streamProxy.ffmpegCmdKey = Object.keys(data)[0]
+          })
+      }
+    },
+    noneReaderHandler: function() {
+      console.log(this.streamProxy)
+      if (!this.streamProxy.noneReader || this.streamProxy.noneReader === 0) {
+        this.streamProxy.enableDisableNoneReader = false
+        this.streamProxy.enableRemoveNoneReader = false
+      } else if (this.streamProxy.noneReader === 1) {
+        this.streamProxy.enableDisableNoneReader = true
+        this.streamProxy.enableRemoveNoneReader = false
+      } else if (this.streamProxy.noneReader === 2) {
+        this.streamProxy.enableDisableNoneReader = false
+        this.streamProxy.enableRemoveNoneReader = true
+      }
+    }
+  }
+}
+</script>

web/src/views/streamProxy/index.vue

@@ -0,0 +1,286 @@
+<template>
+  <div id="streamProxyList" class="app-container">
+    <div v-if="!streamProxy" style="height: calc(100vh - 124px);">
+      <el-form :inline="true" size="mini">
+        <el-form-item label="搜索">
+          <el-input
+            v-model="searchSrt"
+            style="margin-right: 1rem; width: auto;"
+            placeholder="关键字"
+            prefix-icon="el-icon-search"
+            clearable
+            @input="getStreamProxyList"
+          />
+        </el-form-item>
+        <el-form-item label="流媒体">
+          <el-select
+            v-model="mediaServerId"
+            style="margin-right: 1rem;"
+            placeholder="请选择"
+            default-first-option
+            @change="getStreamProxyList"
+          >
+            <el-option label="全部" value="" />
+            <el-option
+              v-for="item in mediaServerList"
+              :key="item.id"
+              :label="item.id"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="拉流状态">
+          <el-select
+            v-model="pulling"
+            style="margin-right: 1rem;"
+            placeholder="请选择"
+            default-first-option
+            @change="getStreamProxyList"
+          >
+            <el-option label="全部" value="" />
+            <el-option label="正在拉流" value="true" />
+            <el-option label="尚未拉流" value="false" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-plus" size="mini" style="margin-right: 1rem;" type="primary" @click="addStreamProxy">添加代理</el-button>
+        </el-form-item>
+        <el-form-item style="float: right;">
+          <el-button icon="el-icon-refresh-right" circle @click="refresh()" />
+        </el-form-item>
+      </el-form>
+      <devicePlayer ref="devicePlayer" />
+      <el-table size="small" :data="streamProxyList" style="width: 100%" height="calc(100% - 64px)">
+        <el-table-column prop="app" label="流应用名" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="stream" label="流ID" min-width="120" show-overflow-tooltip />
+        <el-table-column label="流地址" min-width="250" show-overflow-tooltip>
+          <template v-slot:default="scope">
+            <div slot="reference" class="name-wrapper">
+              <el-tag v-clipboard="scope.row.srcUrl" size="medium" @success="$message({type:'success', message:'成功拷贝到粘贴板'})">
+                <i class="el-icon-document-copy" title="点击拷贝" />
+                {{ scope.row.srcUrl }}
+              </el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="mediaServerId" label="流媒体" min-width="180" />
+        <el-table-column label="代理方式" width="100">
+          <template v-slot:default="scope">
+            <div slot="reference" class="name-wrapper">
+              {{ scope.row.type === "default"? "默认":"FFMPEG代理" }}
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="gbDeviceId" label="国标编码" min-width="180" show-overflow-tooltip />
+        <el-table-column label="拉流状态" min-width="100">
+          <template v-slot:default="scope">
+            <div slot="reference" class="name-wrapper">
+              <el-tag v-if="scope.row.pulling && myServerId !== scope.row.serverId" size="medium" style="border-color: #ecf1af">正在拉流</el-tag>
+              <el-tag v-if="scope.row.pulling && myServerId === scope.row.serverId" size="medium">正在拉流</el-tag>
+              <el-tag v-if="!scope.row.pulling" size="medium" type="info">尚未拉流</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="启用" min-width="100">
+          <template v-slot:default="scope">
+            <div slot="reference" class="name-wrapper">
+              <el-tag v-if="scope.row.enable && myServerId !== scope.row.serverId" size="medium" style="border-color: #ecf1af">已启用</el-tag>
+              <el-tag v-if="scope.row.enable && myServerId === scope.row.serverId" size="medium">已启用</el-tag>
+              <el-tag v-if="!scope.row.enable" size="medium" type="info">未启用</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" min-width="150" show-overflow-tooltip />
+        <el-table-column label="操作" width="370" fixed="right">
+          <template v-slot:default="scope">
+            <el-button size="medium" :loading="scope.row.playLoading" icon="el-icon-video-play" type="text" @click="play(scope.row)">播放</el-button>
+            <el-divider direction="vertical" />
+            <el-button v-if="scope.row.pulling" size="medium" icon="el-icon-switch-button" style="color: #f56c6c" type="text" @click="stopPlay(scope.row)">停止</el-button>
+            <el-divider v-if="scope.row.pulling" direction="vertical" />
+            <el-button size="medium" icon="el-icon-edit" type="text" @click="edit(scope.row)">
+              编辑
+            </el-button>
+            <el-divider direction="vertical" />
+            <el-button size="medium" icon="el-icon-cloudy" type="text" @click="queryCloudRecords(scope.row)">云端录像</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="medium" icon="el-icon-delete" type="text" style="color: #f56c6c" @click="deleteStreamProxy(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        style="text-align: right"
+        :current-page="currentPage"
+        :page-size="count"
+        :page-sizes="[15, 25, 35, 50]"
+        layout="total, sizes, prev, pager, next"
+        :total="total"
+        @size-change="handleSizeChange"
+        @current-change="currentChange"
+      />
+    </div>
+    <StreamProxyEdit v-if="streamProxy" v-model="streamProxy" :close-edit="closeEdit" />
+  </div>
+</template>
+
+<script>
+import devicePlayer from '../dialog/devicePlayer.vue'
+import StreamProxyEdit from './edit.vue'
+import Vue from 'vue'
+
+export default {
+  name: 'Proxy',
+  components: {
+    devicePlayer,
+    StreamProxyEdit
+  },
+  data() {
+    return {
+      streamProxyList: [],
+      currentPusher: {}, // 当前操作设备对象
+      updateLooper: 0, // 数据刷新轮训标志
+      currentDeviceChannelsLenth: 0,
+      currentPage: 1,
+      count: 15,
+      total: 0,
+      streamProxy: null,
+      searchSrt: '',
+      mediaServerId: '',
+      pulling: '',
+      mediaServerList: []
+    }
+  },
+  computed: {
+    Vue() {
+      return Vue
+    },
+    myServerId() {
+      return this.$store.getters.serverId
+    }
+  },
+  mounted() {
+    this.initData()
+    this.startUpdateList()
+  },
+  destroyed() {
+    this.$destroy('videojs')
+    clearTimeout(this.updateLooper)
+  },
+  methods: {
+    initData: function() {
+      this.getStreamProxyList()
+      this.$store.dispatch('server/getOnlineMediaServerList')
+        .then((data) => {
+          this.mediaServerList = data
+        })
+    },
+    startUpdateList: function() {
+      this.updateLooper = setInterval(() => {
+        if (!this.streamProxy) {
+          this.getStreamProxyList()
+        }
+      }, 1000)
+    },
+    currentChange: function(val) {
+      this.currentPage = val
+      this.getStreamProxyList()
+    },
+    handleSizeChange: function(val) {
+      this.count = val
+      this.getStreamProxyList()
+    },
+    getStreamProxyList: function() {
+      this.$store.dispatch('streamProxy/queryList', {
+        page: this.currentPage,
+        count: this.count,
+        query: this.searchSrt,
+        pulling: this.pulling,
+        mediaServerId: this.mediaServerId
+      })
+        .then(data => {
+          this.total = data.total
+          for (let i = 0; i < data.list.length; i++) {
+            data.list[i]['playLoading'] = false
+          }
+          this.streamProxyList = data.list
+        })
+    },
+    addStreamProxy: function() {
+      this.streamProxy = {
+        type: 'default',
+        dataType: 3,
+        noneReader: 1,
+        enable: true,
+        enableAudio: true,
+        mediaServerId: '',
+        timeout: 10
+      }
+    },
+    edit: function(row) {
+      if (row.enableDisableNoneReader) {
+        this.$set(row, 'noneReader', 1)
+      } else if (row.enableRemoveNoneReader) {
+        this.$set(row, 'noneReader', 2)
+      } else {
+        this.$set(row, 'noneReader', 0)
+      }
+      this.streamProxy = row
+      this.$set(this.streamProxy, 'rtspType', row.rtspType)
+    },
+    closeEdit: function(row) {
+      this.streamProxy = null
+    },
+    play: function(row) {
+      row.playLoading = true
+      this.$store.dispatch('streamProxy/play', row.id)
+        .then((data) => {
+          this.$refs.devicePlayer.openDialog('streamPlay', null, null, {
+            streamInfo: data,
+            hasAudio: true
+          })
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+        .finally(() => {
+          row.playLoading = false
+        })
+    },
+    stopPlay: function(row) {
+      this.$store.dispatch('streamProxy/stopPlay', row.id)
+        .then((data) => {
+          this.$refs.devicePlayer.openDialog('streamPlay', null, null, {
+            streamInfo: data,
+            hasAudio: true
+          })
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    queryCloudRecords: function(row) {
+      this.$router.push(`/cloudRecordDetail/${row.app}/${row.stream}`)
+    },
+    deleteStreamProxy: function(row) {
+      this.$confirm('确定删除此代理吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$store.dispatch('streamProxy/remove', row.id)
+          .then((data) => {
+            this.$message.success({
+              showClose: true,
+              message: '删除成功'
+            })
+            this.initData()
+          })
+      }).catch(() => {
+      })
+    },
+    refresh: function() {
+      this.initData()
+    }
+  }
+}
+</script>