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

<template>
    <a-card>
        <a-table
        style="margin-top: 20px;"
        :columns="columns"
        :data-source="state.dataSource"
        :loading="state.loading"
        >
        <template #bodyCell="{column, record}">
        <template v-if="column.key === 'action'">
            <a-space>
              <a @click="goGB28181Records(record.id)">查看录像</a>
              <a @click="openModal(record.id)" >控制</a>
            </a-space>
          </template>
      </template>
        </a-table>
    </a-card>
    <a-modal
    title="控制设备"
    :open="state.controlVisible"
    ok-text="确定"
    cancel-text="取消"
    @cancel="closeModel"
    @ok="controlGB28181Device"
  >
   <a-form :label-col="{span: 4}" :wrapper-col="{span: 14}">
    <a-form-item label="通道" v-bind="controlParamsState.channel">
      <a-input v-model:value="controlParamsState.channel"  />
    </a-form-item>
    <a-form-item label="命令"  v-bind="controlParamsState.ptzcmd">
      <a-input v-model:value="controlParamsState.ptzcmd"  />
    </a-form-item>
   </a-form>
  </a-modal>
</template>
<script lang="ts" setup >
import { RtsController } from '@/controller/rts'
import { onMounted, reactive } from 'vue'

const columns = [
  {
    title: 'ID',
    dataIndex: 'ID'
  },
  {
    title: '名称',
    dataIndex: 'Name'
  },
  {
    title: '制造商',
    dataIndex: 'Manufacturer'
  },
  {
    title: '注册时间',
    dataIndex: 'RegisterTime'
  },
  {
    title: '状态',
    dataIndex: 'Status'
  },
  {
    title: '网络地址',
    dataIndex: 'NetAddr'
  },
  {
    title: 'Owner',
    dataIndex: 'Owner'
  },
  {
    title: 'gps时间',
    dataIndex: 'GpsTime'
  },
  {
    title: '经度',
    dataIndex: 'Longitude'
  },
  {
    title: '纬度',
    dataIndex: 'Latitude'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action'
  }
]
const controlParamsState = reactive({
  id: '',
  channel: '',
  ptzcmd: ''
})

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

const getGB28181List = async () => {
  const { data } = await RtsController.listGB28181()
  state.dataSource = data
}

const goGB28181Records = async (id :string) => {
  router.push({ path: '/gb28181/record', query: { id } })
}

const controlGB28181Device = async () => {
  const { data } = await RtsController.controlGB28181(controlParamsState)
  console.log(data)
}

onMounted(() => {
  getGB28181List()
})

const openModal = (id:string) => {
  state.controlVisible = true
  controlParamsState.id = id
}

const closeModel = () => {
  state.controlVisible = false
}
</script>

<style lang="less" scoped >
</style>