|
|
@@ -10,7 +10,7 @@
|
|
|
@change="onChangeSpace"
|
|
|
>
|
|
|
<a-select-option
|
|
|
- :key="item.spaceId"
|
|
|
+ :key="index"
|
|
|
:value="item.spaceId"
|
|
|
v-for="(item, index) in state.spaceList"
|
|
|
>
|
|
|
@@ -89,28 +89,23 @@
|
|
|
:active-tab-key="activeTabKey"
|
|
|
@tabChange="key => onTabChange(key)"
|
|
|
>
|
|
|
- <table-pro
|
|
|
- :service="deviceActionMap.get(activeTabKey)?.get"
|
|
|
- :serviceParams="deviceActionParams"
|
|
|
- :columns="deviceActionMap.get(activeTabKey)?.column"
|
|
|
- :hiddenMeunKeys="['add']"
|
|
|
- >
|
|
|
- <template #search >
|
|
|
- <a-space>
|
|
|
+ <a-space>
|
|
|
<a-range-picker v-model:value="deviceActionParams.times" />
|
|
|
- <a-select v-model:value="deviceActionParams.recordFormat" >
|
|
|
+ <a-select width="80px" v-model:value="deviceActionParams.recordFormat" >
|
|
|
<a-select-options v-for="item in SpaceController.recordFormat" :key="item" :value="item" >
|
|
|
{{item}}
|
|
|
</a-select-options>
|
|
|
</a-select>
|
|
|
<a-button type="primary" @click="search">搜索</a-button>
|
|
|
</a-space>
|
|
|
- </template>
|
|
|
- <template #render="{column, record}" >
|
|
|
- <template v-if="column.key === 'recordStartTs'" >{{dayjs(record.recordStartTs).format('YYYY/MM/DD HH:mm:ss')}}</template>
|
|
|
- <template v-if="column.key === 'recordEndTs'" >{{dayjs(record.recordEndTs).format('YYYY/MM/DD HH:mm:ss')}}</template>
|
|
|
- </template>
|
|
|
- </table-pro>
|
|
|
+ <!-- 视频 图片区域 -->
|
|
|
+ <a-row :gutter="[8, 8]" style="margin-top: 20px;" >
|
|
|
+ <a-col :span="4" v-for="item in state.deviceMediaList" :key="item" >
|
|
|
+ <div class="media-card">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
</a-card>
|
|
|
</modal-pro>
|
|
|
</template>
|
|
|
@@ -240,10 +235,12 @@ const state = reactive<{
|
|
|
visible: boolean,
|
|
|
activeVisible: boolean,
|
|
|
spaceList: CVS.space[]
|
|
|
+ deviceMediaList: any[]
|
|
|
}>({
|
|
|
visible: false,
|
|
|
activeVisible: false,
|
|
|
- spaceList: []
|
|
|
+ spaceList: [],
|
|
|
+ deviceMediaList: []
|
|
|
})
|
|
|
|
|
|
const deviceActionParams = reactive({
|
|
|
@@ -251,9 +248,18 @@ const deviceActionParams = reactive({
|
|
|
startTs: '',
|
|
|
endTs: '',
|
|
|
recordFormat: '',
|
|
|
- deviceId: ''
|
|
|
+ deviceId: '',
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10
|
|
|
})
|
|
|
|
|
|
+watch(
|
|
|
+ () => activeTabKey.value,
|
|
|
+ () => {
|
|
|
+ getMedia()
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
watch(
|
|
|
() => deviceActionParams.times,
|
|
|
() => {
|
|
|
@@ -283,7 +289,12 @@ const { resetFields, validate, validateInfos } = useForm(deviceState, {
|
|
|
|
|
|
const onTabChange = (key: 'record' | 'thumb' | 'ai') => {
|
|
|
activeTabKey.value = key
|
|
|
- tableProDom.value.reload()
|
|
|
+}
|
|
|
+
|
|
|
+const getMedia = async () => {
|
|
|
+ const { data, sum } = await deviceActionMap.get(activeTabKey.value)?.get(deviceActionParams as any)
|
|
|
+ state.deviceMediaList = data
|
|
|
+ console.log(state.deviceMediaList)
|
|
|
}
|
|
|
|
|
|
const ok = () => {
|
|
|
@@ -300,7 +311,7 @@ const recordParty = async (record: CVS.device) => {
|
|
|
resetFields({ ...record })
|
|
|
deviceActionParams.deviceId = record.deviceId as unknown as string
|
|
|
activeTabKey.value = 'record'
|
|
|
- // const data = await SpaceController.deviceRecordById({ deviceId: record.deviceId, page: 1, pageSize: 10, recordFormat: 'FLV' })
|
|
|
+ getMedia()
|
|
|
}
|
|
|
|
|
|
const thumbParty = (record: CVS.device) => {}
|
|
|
@@ -335,4 +346,10 @@ onMounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
<style lang='less' scoped >
|
|
|
+
|
|
|
+.media-card {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ background-color: pink;
|
|
|
+}
|
|
|
</style>
|