xiaodou-ai-admin/src/pages/rts/pull/index.vue

<template>
  <a-card>
    <a-row justify="end" >
      <a-col  >
        <a-button type="primary" @click="openModal">创建拉流</a-button>
      </a-col>
    </a-row>
    <a-table
      style="margin-top: 20px;"
      :columns="columns"
      :data-source="state.dataSource"
      :loading="state.loading"
    >
      <template #bodyCell="{column, record}" >
        <template v-if="column.key === 'StartTime'" >
          {{dayjs(record.StartTime).format('YYYY/MM/DD HH:mm:ss')}}
        </template>
        <template v-if="column.key === 'action'"  >
          <a-space>
            <a @click="stopPull(record.RemoteURL)" >停止</a>
          </a-space>
        </template>
      </template>
    </a-table>
  </a-card>

  <modal-pro
    label="创建拉流"
    :open="state.visible"
    @cancel="state.visible = false "
    @ok="ok"
  >
    <a-form :label-col="{span: 5}" >
      <a-form-item label="拉流类型" >
        <a-select v-model:value="bodyParamsState.name" >
          <a-select-option
            v-for="item in pullList"
            :key="item.key"
            :value="item.value"
          >
            {{item.value}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="拉流地址" v-bind='validateInfos.target' >
        <a-input v-model:value="bodyParamsState.target" > </a-input>
      </a-form-item>
      <a-form-item label="视频流标识" v-bind='validateInfos.streamPath' >
        <a-input v-model:value="bodyParamsState.streamPath" > </a-input>
      </a-form-item>
    </a-form>
  </modal-pro>
</template>
<script lang="ts" setup >
import { RtsController } from '@/controller/rts'
import { onMounted, reactive } from 'vue'
import { Form } from 'ant-design-vue'
import dayjs from 'dayjs'

const columns = [
  {
    title: 'ID',
    dataIndex: 'ID'
  },
  {
    title: '拉流类型',
    dataIndex: 'Type'
  },
  {
    title: '流地址',
    dataIndex: 'StreamPath'
  },
  {
    title: '被拉流地址',
    dataIndex: 'RemoteURL'
  },
  {
    title: '重联次数',
    dataIndex: 'ReConnectCount'
  },
  {
    title: '拉流参数',
    dataIndex: 'Args'
  },
  {
    title: '开始时间',
    dataIndex: 'StartTime',
    key: 'StartTime'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]

const useForm = Form.useForm

const pullList = [
  {
    key: 'RTSP',
    value: 'RTSP'
  },
  {
    key: 'RTMP',
    value: 'RTMP'
  }
]

const bodyParamsState = reactive({
  name: 'RTSP',
  target: '',
  streamPath: '',
  save: 2
})

const state = reactive<{
  dataSource: RTS.PullStream.Detail[]
  loading: boolean
  visible: boolean
  detail: Partial<RTS.PullStream.Detail>
}>({
  loading: false,
  visible: false,
  detail: {},
  dataSource: []
})

const { resetFields, validate, validateInfos } = useForm(bodyParamsState, reactive({
  streamPath: [{ required: 'true', message: '请填写视频流标识' }],
  target: [{ required: 'true', message: '请填写流地址' }]
}))

const openModal = () => {
  state.visible = true
}

const ok = () => {
  validate().then(async () => {
    await RtsController.createPull(bodyParamsState)
    state.visible = false
    getPullList()
  })
}

const stopPull = async (remoteurl: string) => {
  await RtsController.stopPull(remoteurl)
}

const getPullList = async () => {
  const { data } = await RtsController.listPullList()
  state.dataSource = data
}

onMounted(() => {
  getPullList()
})

</script>

<style lang="less" scoped >

</style>