pref:select新增流媒体配置

fengtao
1 parent 6fed128d
Showing 4 changed files with 72 additions and 12 deletions
src/views/camera/manage/CameraDrawer.vue
src/views/camera/manage/config.data.ts
src/views/camera/streaming/SteramingDrawer.vue
src/views/report/config/config.data.ts
--- a/src/views/camera/manage/CameraDrawer.vue
View file @30126b2
+++ b/src/views/camera/manage/CameraDrawer.vue
View file @30126b2
@@ -25,11 +25,28 @@
           </div>
         </Upload>
       </template>
+      <template #videoPlatformIdSlot="{ model, field }">
+        <a-select
+          placeholder="请选择流媒体配置"
+          v-model:value="model[field]"
+          :options="streamConfigOptions.map((item) => ({ value: item.value, label: item.label }))"
+        >
+          <template #dropdownRender="{ menuNode: menu }">
+            <v-nodes :vnodes="menu" />
+            <a-divider style="margin: 4px 0" />
+            <div @click="handleOpenStreamConfig" style="padding: 4px 8px; cursor: pointer">
+              <plus-outlined />
+              新增流媒体配置
+            </div>
+          </template>
+        </a-select>
+      </template>
     </BasicForm>
   </BasicDrawer>
+  <SteramingDrawer @register="registerSteramingDrawer" @success="handleSuccess" />
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, nextTick } from 'vue';
+  import { defineComponent, ref, computed, unref, nextTick, onMounted } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
@@ -39,14 +56,27 @@
   import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
   import { FileItem } from '/@/components/Upload/src/typing';
+  import { getStreamingMediaList } from '/@/api/camera/cameraManager';
+  import SteramingDrawer from '../streaming/SteramingDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
   export default defineComponent({
     name: 'ContactDrawer',
-    components: { BasicDrawer, BasicForm, Upload, PlusOutlined, LoadingOutlined },
+    components: {
+      BasicDrawer,
+      BasicForm,
+      Upload,
+      PlusOutlined,
+      LoadingOutlined,
+      SteramingDrawer,
+      VNodes: (_, { attrs }) => {
+        return attrs.vnodes;
+      },
+    },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const loading = ref(false);
-
+      const streamConfigOptions: any = ref([]);
       const isUpdate = ref(true);
       const editId = ref('');
       const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
@@ -54,7 +84,32 @@
         schemas: formSchema,
         showActionButtonGroup: false,
       });
+      onMounted(async () => {
+        const res = await getStreamingMediaList({});
+        streamConfigOptions.value = res.map((m) => {
+          return {
+            label: m.host,
+            value: m.id,
+          };
+        });
+      });
+      const [registerSteramingDrawer, { openDrawer }] = useDrawer();
+      const handleOpenStreamConfig = () => {
+        openDrawer(true, {
+          createFlag: true,
+        });
+      };
+      async function handleSuccess() {
+        const res = await getStreamingMediaList({});
+        if (res) {
+          streamConfigOptions.value = res.map((m) => {
+            return { label: m.host, value: m.id };
+          });
+        } else {
+          streamConfigOptions.value = [];
+        }
+      }
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         await resetFields();
         setDrawerProps({ confirmLoading: false });
@@ -136,6 +191,10 @@
         beforeUpload,
         tenantLogo,
         loading,
+        streamConfigOptions,
+        registerSteramingDrawer,
+        handleOpenStreamConfig,
+        handleSuccess,
       };
     },
   });
--- a/src/views/camera/manage/config.data.ts
View file @30126b2
+++ b/src/views/camera/manage/config.data.ts
View file @30126b2
@@ -4,7 +4,6 @@ import { copyTransFun } from '/@/utils/fnUtils';
 import type { FormSchema as QFormSchema } from '/@/components/Form/index';
 import { CameraVideoUrl, CameraMaxLength, MediaTypeValidate } from '/@/utils/rules';
-import { getStreamingMediaList } from '/@/api/camera/cameraManager';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 export enum AccessMode {
@@ -190,15 +189,13 @@ export const formSchema: QFormSchema[] = [
   {
     field: 'videoPlatformId',
     label: '流媒体配置',
-    component: 'ApiSelect',
+    component: 'Select',
     ifShow({ values }) {
       return values.accessMode === AccessMode.Streaming;
     },
+    slot: 'videoPlatformIdSlot',
     componentProps: {
       placeholder: '请选择流媒体配置',
-      api: getStreamingMediaList,
-      labelField: 'host',
-      valueField: 'id',
     },
   },
   {
--- a/src/views/camera/streaming/SteramingDrawer.vue
View file @30126b2
+++ b/src/views/camera/streaming/SteramingDrawer.vue
View file @30126b2
@@ -9,7 +9,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { PlayProtocol } from '../manage/config.data';
-  const emit = defineEmits(['success','register']);
+  const emit = defineEmits(['success', 'register']);
   const createFlag = ref(false);
@@ -23,7 +23,7 @@
     showActionButtonGroup: false,
   });
-  const [registerDrawer, { setDrawerProps }] = useDrawerInner((data: DrawerParams) => {
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner((data: DrawerParams) => {
     createFlag.value = data.createFlag;
     if (!unref(createFlag)) {
       id = data.record!.id;
@@ -48,6 +48,7 @@
       const { createMessage } = useMessage();
       createMessage.success(message);
       emit('success');
+      closeDrawer();
     } catch (e) {
     } finally {
       setDrawerProps({
--- a/src/views/report/config/config.data.ts
View file @30126b2
+++ b/src/views/report/config/config.data.ts
View file @30126b2
@@ -185,6 +185,7 @@ export const formSchema: QFormSchema[] = [
   {
     field: 'executeWay',
     component: 'RadioGroup',
+    helpMessage: [''],
     label: '执行方式',
     colProps: {
       span: 24,
@@ -225,6 +226,8 @@ export const formSchema: QFormSchema[] = [
             });
           } else {
             setFieldsValue({ queryMode: QueryWay.LATEST });
+            setFieldsValue({ startTs: 5000 });
+            setFieldsValue({ interval: 1000 });
             dataCompareOpions = [{ label: '固定周期', value: QueryWay.LATEST }];
             updateSchema({
               defaultValue: QueryWay.LATEST,
@@ -437,7 +440,7 @@ export const formSchema: QFormSchema[] = [
   },
   {
     field: SchemaFiled.START_TS,
-    label: '时间周期',
+    label: '最近时间',
     component: 'Select',
     required: true,
     ifShow({ values }) {
@@ -447,7 +450,7 @@ export const formSchema: QFormSchema[] = [
       const { setFieldsValue } = formActionType;
       return {
         defaultValue: 1000,
-        placeholder: '请选择时间周期',
+        placeholder: '请选择近期时间',
         options: intervalOption,
         onChange() {
           setFieldsValue({ [SchemaFiled.INTERVAL]: null });