Showing
4 changed files
with
72 additions
and
12 deletions
... | ... | @@ -25,11 +25,28 @@ |
25 | 25 | </div> |
26 | 26 | </Upload> |
27 | 27 | </template> |
28 | + <template #videoPlatformIdSlot="{ model, field }"> | |
29 | + <a-select | |
30 | + placeholder="请选择流媒体配置" | |
31 | + v-model:value="model[field]" | |
32 | + :options="streamConfigOptions.map((item) => ({ value: item.value, label: item.label }))" | |
33 | + > | |
34 | + <template #dropdownRender="{ menuNode: menu }"> | |
35 | + <v-nodes :vnodes="menu" /> | |
36 | + <a-divider style="margin: 4px 0" /> | |
37 | + <div @click="handleOpenStreamConfig" style="padding: 4px 8px; cursor: pointer"> | |
38 | + <plus-outlined /> | |
39 | + 新增流媒体配置 | |
40 | + </div> | |
41 | + </template> | |
42 | + </a-select> | |
43 | + </template> | |
28 | 44 | </BasicForm> |
29 | 45 | </BasicDrawer> |
46 | + <SteramingDrawer @register="registerSteramingDrawer" @success="handleSuccess" /> | |
30 | 47 | </template> |
31 | 48 | <script lang="ts"> |
32 | - import { defineComponent, ref, computed, unref, nextTick } from 'vue'; | |
49 | + import { defineComponent, ref, computed, unref, nextTick, onMounted } from 'vue'; | |
33 | 50 | import { BasicForm, useForm } from '/@/components/Form'; |
34 | 51 | import { formSchema } from './config.data'; |
35 | 52 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; |
... | ... | @@ -39,14 +56,27 @@ |
39 | 56 | import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue'; |
40 | 57 | import { upload } from '/@/api/oss/ossFileUploader'; |
41 | 58 | import { FileItem } from '/@/components/Upload/src/typing'; |
59 | + import { getStreamingMediaList } from '/@/api/camera/cameraManager'; | |
60 | + import SteramingDrawer from '../streaming/SteramingDrawer.vue'; | |
61 | + import { useDrawer } from '/@/components/Drawer'; | |
42 | 62 | |
43 | 63 | export default defineComponent({ |
44 | 64 | name: 'ContactDrawer', |
45 | - components: { BasicDrawer, BasicForm, Upload, PlusOutlined, LoadingOutlined }, | |
65 | + components: { | |
66 | + BasicDrawer, | |
67 | + BasicForm, | |
68 | + Upload, | |
69 | + PlusOutlined, | |
70 | + LoadingOutlined, | |
71 | + SteramingDrawer, | |
72 | + VNodes: (_, { attrs }) => { | |
73 | + return attrs.vnodes; | |
74 | + }, | |
75 | + }, | |
46 | 76 | emits: ['success', 'register'], |
47 | 77 | setup(_, { emit }) { |
48 | 78 | const loading = ref(false); |
49 | - | |
79 | + const streamConfigOptions: any = ref([]); | |
50 | 80 | const isUpdate = ref(true); |
51 | 81 | const editId = ref(''); |
52 | 82 | const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ |
... | ... | @@ -54,7 +84,32 @@ |
54 | 84 | schemas: formSchema, |
55 | 85 | showActionButtonGroup: false, |
56 | 86 | }); |
87 | + onMounted(async () => { | |
88 | + const res = await getStreamingMediaList({}); | |
89 | + streamConfigOptions.value = res.map((m) => { | |
90 | + return { | |
91 | + label: m.host, | |
92 | + value: m.id, | |
93 | + }; | |
94 | + }); | |
95 | + }); | |
96 | + const [registerSteramingDrawer, { openDrawer }] = useDrawer(); | |
57 | 97 | |
98 | + const handleOpenStreamConfig = () => { | |
99 | + openDrawer(true, { | |
100 | + createFlag: true, | |
101 | + }); | |
102 | + }; | |
103 | + async function handleSuccess() { | |
104 | + const res = await getStreamingMediaList({}); | |
105 | + if (res) { | |
106 | + streamConfigOptions.value = res.map((m) => { | |
107 | + return { label: m.host, value: m.id }; | |
108 | + }); | |
109 | + } else { | |
110 | + streamConfigOptions.value = []; | |
111 | + } | |
112 | + } | |
58 | 113 | const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => { |
59 | 114 | await resetFields(); |
60 | 115 | setDrawerProps({ confirmLoading: false }); |
... | ... | @@ -136,6 +191,10 @@ |
136 | 191 | beforeUpload, |
137 | 192 | tenantLogo, |
138 | 193 | loading, |
194 | + streamConfigOptions, | |
195 | + registerSteramingDrawer, | |
196 | + handleOpenStreamConfig, | |
197 | + handleSuccess, | |
139 | 198 | }; |
140 | 199 | }, |
141 | 200 | }); | ... | ... |
... | ... | @@ -4,7 +4,6 @@ import { copyTransFun } from '/@/utils/fnUtils'; |
4 | 4 | import type { FormSchema as QFormSchema } from '/@/components/Form/index'; |
5 | 5 | |
6 | 6 | import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules'; |
7 | -import { getStreamingMediaList } from '/@/api/camera/cameraManager'; | |
8 | 7 | import { h } from 'vue'; |
9 | 8 | import SnHelpMessage from './SnHelpMessage.vue'; |
10 | 9 | export enum AccessMode { |
... | ... | @@ -190,15 +189,13 @@ export const formSchema: QFormSchema[] = [ |
190 | 189 | { |
191 | 190 | field: 'videoPlatformId', |
192 | 191 | label: '流媒体配置', |
193 | - component: 'ApiSelect', | |
192 | + component: 'Select', | |
194 | 193 | ifShow({ values }) { |
195 | 194 | return values.accessMode === AccessMode.Streaming; |
196 | 195 | }, |
196 | + slot: 'videoPlatformIdSlot', | |
197 | 197 | componentProps: { |
198 | 198 | placeholder: '请选择流媒体配置', |
199 | - api: getStreamingMediaList, | |
200 | - labelField: 'host', | |
201 | - valueField: 'id', | |
202 | 199 | }, |
203 | 200 | }, |
204 | 201 | { | ... | ... |
... | ... | @@ -9,7 +9,7 @@ |
9 | 9 | import { useMessage } from '/@/hooks/web/useMessage'; |
10 | 10 | import { PlayProtocol } from '../manage/config.data'; |
11 | 11 | |
12 | - const emit = defineEmits(['success','register']); | |
12 | + const emit = defineEmits(['success', 'register']); | |
13 | 13 | |
14 | 14 | const createFlag = ref(false); |
15 | 15 | |
... | ... | @@ -23,7 +23,7 @@ |
23 | 23 | showActionButtonGroup: false, |
24 | 24 | }); |
25 | 25 | |
26 | - const [registerDrawer, { setDrawerProps }] = useDrawerInner((data: DrawerParams) => { | |
26 | + const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner((data: DrawerParams) => { | |
27 | 27 | createFlag.value = data.createFlag; |
28 | 28 | if (!unref(createFlag)) { |
29 | 29 | id = data.record!.id; |
... | ... | @@ -48,6 +48,7 @@ |
48 | 48 | const { createMessage } = useMessage(); |
49 | 49 | createMessage.success(message); |
50 | 50 | emit('success'); |
51 | + closeDrawer(); | |
51 | 52 | } catch (e) { |
52 | 53 | } finally { |
53 | 54 | setDrawerProps({ | ... | ... |
... | ... | @@ -185,6 +185,7 @@ export const formSchema: QFormSchema[] = [ |
185 | 185 | { |
186 | 186 | field: 'executeWay', |
187 | 187 | component: 'RadioGroup', |
188 | + helpMessage: [''], | |
188 | 189 | label: '执行方式', |
189 | 190 | colProps: { |
190 | 191 | span: 24, |
... | ... | @@ -225,6 +226,8 @@ export const formSchema: QFormSchema[] = [ |
225 | 226 | }); |
226 | 227 | } else { |
227 | 228 | setFieldsValue({ queryMode: QueryWay.LATEST }); |
229 | + setFieldsValue({ startTs: 5000 }); | |
230 | + setFieldsValue({ interval: 1000 }); | |
228 | 231 | dataCompareOpions = [{ label: '固定周期', value: QueryWay.LATEST }]; |
229 | 232 | updateSchema({ |
230 | 233 | defaultValue: QueryWay.LATEST, |
... | ... | @@ -437,7 +440,7 @@ export const formSchema: QFormSchema[] = [ |
437 | 440 | }, |
438 | 441 | { |
439 | 442 | field: SchemaFiled.START_TS, |
440 | - label: '时间周期', | |
443 | + label: '最近时间', | |
441 | 444 | component: 'Select', |
442 | 445 | required: true, |
443 | 446 | ifShow({ values }) { |
... | ... | @@ -447,7 +450,7 @@ export const formSchema: QFormSchema[] = [ |
447 | 450 | const { setFieldsValue } = formActionType; |
448 | 451 | return { |
449 | 452 | defaultValue: 1000, |
450 | - placeholder: '请选择时间周期', | |
453 | + placeholder: '请选择近期时间', | |
451 | 454 | options: intervalOption, |
452 | 455 | onChange() { |
453 | 456 | setFieldsValue({ [SchemaFiled.INTERVAL]: null }); | ... | ... |