简柏林 / thingskit-front · Commits

Commit 60fdab9bbc62c487fcc5ff7a2ee5560eefe37a50

Authored by fengtao
2 parents 40e125c2 b26a6b14

Merge branch 'main' into f-dev

Inline Side-by-side
Showing 6 changed files with 116 additions and 121 deletions
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 <script lang="ts"> 31 <script lang="ts">
32 import { defineComponent, ref, computed, unref, nextTick } from 'vue'; 32 import { defineComponent, ref, computed, unref, nextTick } from 'vue';
33 import { BasicForm, useForm } from '/@/components/Form'; 33 import { BasicForm, useForm } from '/@/components/Form';
34 - import { formSchema, manuallyEnter, streamingMediaAcquire } from './config.data'; 34 + import { formSchema } from './config.data';
35 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; 35 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
36 import { createOrEditCameraManage } from '/@/api/camera/cameraManager'; 36 import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
37 import { message, Upload } from 'ant-design-vue'; 37 import { message, Upload } from 'ant-design-vue';
@@ -49,10 +49,7 @@ @@ -49,10 +49,7 @@
49 49
50 const isUpdate = ref(true); 50 const isUpdate = ref(true);
51 const editId = ref(''); 51 const editId = ref('');
52 - const [  
53 - registerForm,  
54 - { validate, setFieldsValue, resetFields, removeSchemaByFiled, appendSchemaByField },  
55 - ] = useForm({ 52 + const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
56 labelWidth: 120, 53 labelWidth: 120,
57 schemas: formSchema, 54 schemas: formSchema,
58 showActionButtonGroup: false, 55 showActionButtonGroup: false,
@@ -64,19 +61,6 @@ @@ -64,19 +61,6 @@
64 isUpdate.value = !!data?.isUpdate; 61 isUpdate.value = !!data?.isUpdate;
65 if (unref(isUpdate)) { 62 if (unref(isUpdate)) {
66 await nextTick(); 63 await nextTick();
67 - removeSchemaByFiled([  
68 - 'videoPlatformId',  
69 - 'streamType',  
70 - 'playProtocol',  
71 - 'sn',  
72 - 'brand',  
73 - 'videoUrl',  
74 - ]);  
75 - if (data.record.accessMode === 0) {  
76 - manuallyEnter.forEach((schema) => appendSchemaByField(schema, undefined));  
77 - } else {  
78 - streamingMediaAcquire.forEach((schema) => appendSchemaByField(schema, undefined));  
79 - }  
80 editId.value = data.record.id; 64 editId.value = data.record.id;
81 tenantLogo.value = data.record?.avatar; 65 tenantLogo.value = data.record?.avatar;
82 await setFieldsValue(data.record); 66 await setFieldsValue(data.record);
@@ -97,7 +81,7 @@ @@ -97,7 +81,7 @@
97 const response = await upload(formData); 81 const response = await upload(formData);
98 if (response.fileStaticUri) { 82 if (response.fileStaticUri) {
99 tenantLogo.value = response.fileStaticUri; 83 tenantLogo.value = response.fileStaticUri;
100 - loading.value = true; 84 + loading.value = false;
101 } 85 }
102 } 86 }
103 } 87 }
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 import snStep3 from '/@/assets/images/sn-step3.png'; 6 import snStep3 from '/@/assets/images/sn-step3.png';
7 const imgList: string[] = [snStep1, snStep2, snStep3]; 7 const imgList: string[] = [snStep1, snStep2, snStep3];
8 function handlePreview() { 8 function handlePreview() {
9 - createImgPreview({ imageList: imgList }); 9 + createImgPreview({ imageList: imgList, defaultWidth: 1000 });
10 } 10 }
11 </script> 11 </script>
12 12
@@ -52,6 +52,12 @@ export const columns: BasicColumn[] = [ @@ -52,6 +52,12 @@ export const columns: BasicColumn[] = [
52 width: 160, 52 width: 160,
53 }, 53 },
54 { 54 {
  55 + title: '接受方式',
  56 + dataIndex: 'accessMode',
  57 + width: 160,
  58 + slots: { customRender: 'accessMode' },
  59 + },
  60 + {
55 title: '创建时间', 61 title: '创建时间',
56 dataIndex: 'createTime', 62 dataIndex: 'createTime',
57 width: 180, 63 width: 180,
@@ -77,14 +83,70 @@ export const searchFormSchema: FormSchema[] = [ @@ -77,14 +83,70 @@ export const searchFormSchema: FormSchema[] = [
77 }, 83 },
78 ]; 84 ];
79 85
80 -/**  
81 - * @description 手动输入  
82 - */  
83 -export const manuallyEnter: FormSchema[] = [ 86 +// 弹框配置项
  87 +export const formSchema: QFormSchema[] = [
  88 + {
  89 + field: 'avatar',
  90 + label: '视频封面',
  91 + slot: 'iconSelect',
  92 + component: 'Input',
  93 + },
  94 + {
  95 + field: 'name',
  96 + label: '视频名字',
  97 + required: true,
  98 + component: 'Input',
  99 + componentProps: {
  100 + placeholder: '请输入视频名字',
  101 + maxLength: 30,
  102 + },
  103 + rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
  104 + },
  105 + {
  106 + field: 'organizationId',
  107 + label: '所属组织',
  108 + required: true,
  109 + component: 'ApiTreeSelect',
  110 + componentProps: {
  111 + api: async () => {
  112 + const data = await getOrganizationList();
  113 + copyTransFun(data as any as any[]);
  114 + return data;
  115 + },
  116 + },
  117 + },
  118 + {
  119 + label: '视频流获取方式',
  120 + field: 'accessMode',
  121 + component: 'RadioGroup',
  122 + rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
  123 + defaultValue: AccessMode.ManuallyEnter,
  124 + componentProps({ formActionType }) {
  125 + return {
  126 + defaultValue: AccessMode.ManuallyEnter,
  127 + placeholder: '请选择视频流获取方式',
  128 + options: [
  129 + { label: '手动输入', value: AccessMode.ManuallyEnter },
  130 + { label: '流媒体获取', value: AccessMode.Streaming },
  131 + ],
  132 + onChange() {
  133 + formActionType.setFieldsValue({
  134 + brand: null,
  135 + sn: null,
  136 + videoUrl: null,
  137 + videoPlatformId: null,
  138 + });
  139 + },
  140 + };
  141 + },
  142 + },
84 { 143 {
85 field: 'brand', 144 field: 'brand',
86 label: '视频厂家', 145 label: '视频厂家',
87 component: 'Input', 146 component: 'Input',
  147 + ifShow({ values }) {
  148 + return values.accessMode === AccessMode.ManuallyEnter;
  149 + },
88 componentProps: { 150 componentProps: {
89 placeholder: '请输入视频厂家', 151 placeholder: '请输入视频厂家',
90 }, 152 },
@@ -95,6 +157,9 @@ export const manuallyEnter: FormSchema[] = [ @@ -95,6 +157,9 @@ export const manuallyEnter: FormSchema[] = [
95 required: true, 157 required: true,
96 component: 'Input', 158 component: 'Input',
97 rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }], 159 rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
  160 + ifShow({ values }) {
  161 + return values.accessMode === AccessMode.ManuallyEnter;
  162 + },
98 componentProps: { 163 componentProps: {
99 placeholder: '请输入摄像头编号', 164 placeholder: '请输入摄像头编号',
100 }, 165 },
@@ -104,22 +169,23 @@ export const manuallyEnter: FormSchema[] = [ @@ -104,22 +169,23 @@ export const manuallyEnter: FormSchema[] = [
104 label: '视频流', 169 label: '视频流',
105 required: true, 170 required: true,
106 component: 'Input', 171 component: 'Input',
  172 + ifShow({ values }) {
  173 + return values.accessMode === AccessMode.ManuallyEnter;
  174 + },
107 componentProps: { 175 componentProps: {
108 placeholder: '请输入视频流', 176 placeholder: '请输入视频流',
109 maxLength: 255, 177 maxLength: 255,
110 }, 178 },
111 rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }], 179 rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }],
112 }, 180 },
113 -];  
114 181
115 -/**  
116 - * @description 流媒体获取  
117 - */  
118 -export const streamingMediaAcquire: FormSchema[] = [  
119 { 182 {
120 field: 'videoPlatformId', 183 field: 'videoPlatformId',
121 label: '流媒体配置', 184 label: '流媒体配置',
122 component: 'ApiSelect', 185 component: 'ApiSelect',
  186 + ifShow({ values }) {
  187 + return values.accessMode === AccessMode.Streaming;
  188 + },
123 componentProps: { 189 componentProps: {
124 placeholder: '请选择流媒体配置', 190 placeholder: '请选择流媒体配置',
125 api: getStreamingMediaList, 191 api: getStreamingMediaList,
@@ -132,6 +198,9 @@ export const streamingMediaAcquire: FormSchema[] = [ @@ -132,6 +198,9 @@ export const streamingMediaAcquire: FormSchema[] = [
132 label: '码流', 198 label: '码流',
133 component: 'RadioGroup', 199 component: 'RadioGroup',
134 defaultValue: StreamType.MASTER, 200 defaultValue: StreamType.MASTER,
  201 + ifShow({ values }) {
  202 + return values.accessMode === AccessMode.Streaming;
  203 + },
135 componentProps: { 204 componentProps: {
136 placeholder: '请选择码流', 205 placeholder: '请选择码流',
137 defaultValue: StreamType.MASTER, 206 defaultValue: StreamType.MASTER,
@@ -147,6 +216,10 @@ export const streamingMediaAcquire: FormSchema[] = [ @@ -147,6 +216,10 @@ export const streamingMediaAcquire: FormSchema[] = [
147 label: '播放协议', 216 label: '播放协议',
148 component: 'RadioGroup', 217 component: 'RadioGroup',
149 defaultValue: PlayProtocol.HTTP, 218 defaultValue: PlayProtocol.HTTP,
  219 + ifShow({ values }) {
  220 + return values.accessMode === AccessMode.Streaming;
  221 + },
  222 + helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
150 componentProps: { 223 componentProps: {
151 placeholder: '请选择播放协议', 224 placeholder: '请选择播放协议',
152 defaultValue: PlayProtocol.HTTP, 225 defaultValue: PlayProtocol.HTTP,
@@ -161,87 +234,11 @@ export const streamingMediaAcquire: FormSchema[] = [ @@ -161,87 +234,11 @@ export const streamingMediaAcquire: FormSchema[] = [
161 label: h(SnHelpMessage) as any, 234 label: h(SnHelpMessage) as any,
162 component: 'Input', 235 component: 'Input',
163 rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }], 236 rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
164 - componentProps: {  
165 - placeholder: '请输入监控点编号', 237 + ifShow({ values }) {
  238 + return values.accessMode === AccessMode.Streaming;
166 }, 239 },
167 - },  
168 -];  
169 -  
170 -// 弹框配置项  
171 -export const formSchema: QFormSchema[] = [  
172 - {  
173 - field: 'avatar',  
174 - label: '视频封面',  
175 - slot: 'iconSelect',  
176 - component: 'Input',  
177 - },  
178 - {  
179 - field: 'name',  
180 - label: '视频名字',  
181 - required: true,  
182 - component: 'Input',  
183 componentProps: { 240 componentProps: {
184 - placeholder: '请输入视频名字',  
185 - maxLength: 30,  
186 - },  
187 - rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],  
188 - },  
189 - {  
190 - field: 'organizationId',  
191 - label: '所属组织',  
192 - required: true,  
193 - component: 'ApiTreeSelect',  
194 - componentProps: {  
195 - api: async () => {  
196 - const data = await getOrganizationList();  
197 - copyTransFun(data as any as any[]);  
198 - return data;  
199 - },  
200 - },  
201 - },  
202 - {  
203 - label: '视频流获取方式',  
204 - field: 'accessMode',  
205 - component: 'RadioGroup',  
206 - rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],  
207 - defaultValue: AccessMode.ManuallyEnter,  
208 - componentProps({ formActionType }) {  
209 - return {  
210 - defaultValue: AccessMode.ManuallyEnter,  
211 - placeholder: '请选择视频流获取方式',  
212 - options: [  
213 - { label: '手动输入', value: AccessMode.ManuallyEnter },  
214 - { label: '流媒体获取', value: AccessMode.Streaming },  
215 - ],  
216 - onChange(event: { target: { value: number } }) {  
217 - formActionType.removeSchemaByFiled([  
218 - 'videoPlatformId',  
219 - 'streamType',  
220 - 'playProtocol',  
221 - 'sn',  
222 - 'brand',  
223 - 'videoUrl',  
224 - ]);  
225 - const {  
226 - target: { value },  
227 - } = event;  
228 - if (value === AccessMode.ManuallyEnter) {  
229 - manuallyEnter.forEach((schema) =>  
230 - formActionType.appendSchemaByField(schema, undefined)  
231 - );  
232 - } else {  
233 - streamingMediaAcquire.forEach((schema) =>  
234 - formActionType.appendSchemaByField(schema, undefined)  
235 - );  
236 -  
237 - formActionType.setFieldsValue({  
238 - streamType: StreamType.MASTER,  
239 - playProtocol: PlayProtocol.HTTP,  
240 - });  
241 - }  
242 - },  
243 - }; 241 + placeholder: '请输入监控点编号',
244 }, 242 },
245 }, 243 },
246 - ...manuallyEnter,  
247 ]; 244 ];
@@ -38,6 +38,15 @@ @@ -38,6 +38,15 @@
38 " 38 "
39 /> 39 />
40 </template> 40 </template>
  41 + <template #accessMode="{ record }">
  42 + <span>{{
  43 + record.accessMode === AccessMode.ManuallyEnter
  44 + ? '手动输入'
  45 + : record.accessMode === AccessMode.Streaming
  46 + ? '流媒体获取'
  47 + : ''
  48 + }}</span>
  49 + </template>
41 <template #action="{ record }"> 50 <template #action="{ record }">
42 <TableAction 51 <TableAction
43 :actions="[ 52 :actions="[
@@ -81,7 +90,7 @@ @@ -81,7 +90,7 @@
81 import CameraDrawer from './CameraDrawer.vue'; 90 import CameraDrawer from './CameraDrawer.vue';
82 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree'; 91 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
83 import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager'; 92 import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
84 - import { searchFormSchema, columns } from './config.data'; 93 + import { searchFormSchema, columns, AccessMode } from './config.data';
85 import VideoPreviewModal from './DialogPreviewVideo.vue'; 94 import VideoPreviewModal from './DialogPreviewVideo.vue';
86 import { useModal } from '/@/components/Modal'; 95 import { useModal } from '/@/components/Modal';
87 import { Authority } from '/@/components/Authority'; 96 import { Authority } from '/@/components/Authority';
@@ -181,6 +190,7 @@ @@ -181,6 +190,7 @@
181 organizationIdTreeRef, 190 organizationIdTreeRef,
182 handleViewVideo, 191 handleViewVideo,
183 registerModal, 192 registerModal,
  193 + AccessMode,
184 }; 194 };
185 }, 195 },
186 }); 196 });
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 import { createOrUpdateStreamingMediaRecord } from '/@/api/camera/cameraManager'; 7 import { createOrUpdateStreamingMediaRecord } from '/@/api/camera/cameraManager';
8 import { StreamingMediaModel } from '/@/api/camera/model/cameraModel'; 8 import { StreamingMediaModel } from '/@/api/camera/model/cameraModel';
9 import { useMessage } from '/@/hooks/web/useMessage'; 9 import { useMessage } from '/@/hooks/web/useMessage';
  10 + import { PlayProtocol } from '../manage/config.data';
10 11
11 const emit = defineEmits({ 12 const emit = defineEmits({
12 success: null, 13 success: null,
@@ -30,6 +31,7 @@ @@ -30,6 +31,7 @@
30 id = data.record!.id; 31 id = data.record!.id;
31 setFieldsValue(data.record); 32 setFieldsValue(data.record);
32 } else { 33 } else {
  34 + setFieldsValue({ ssl: PlayProtocol.HTTP });
33 resetFields(); 35 resetFields();
34 } 36 }
35 }); 37 });
@@ -18,18 +18,6 @@ export const streamingMediaSSLMapping = { @@ -18,18 +18,6 @@ export const streamingMediaSSLMapping = {
18 18
19 export const columnSchema: BasicColumn[] = [ 19 export const columnSchema: BasicColumn[] = [
20 { 20 {
21 - title: '平台类型',  
22 - dataIndex: 'type',  
23 - width: 80,  
24 - slots: { customRender: 'type' },  
25 - },  
26 - {  
27 - title: '部署环境',  
28 - dataIndex: 'ssl',  
29 - width: 80,  
30 - slots: { customRender: 'ssl' },  
31 - },  
32 - {  
33 title: '平台地址', 21 title: '平台地址',
34 dataIndex: 'host', 22 dataIndex: 'host',
35 width: 80, 23 width: 80,
@@ -44,6 +32,18 @@ export const columnSchema: BasicColumn[] = [ @@ -44,6 +32,18 @@ export const columnSchema: BasicColumn[] = [
44 dataIndex: 'appSecret', 32 dataIndex: 'appSecret',
45 width: 80, 33 width: 80,
46 }, 34 },
  35 + {
  36 + title: '平台类型',
  37 + dataIndex: 'type',
  38 + width: 80,
  39 + slots: { customRender: 'type' },
  40 + },
  41 + {
  42 + title: '部署环境',
  43 + dataIndex: 'ssl',
  44 + width: 80,
  45 + slots: { customRender: 'ssl' },
  46 + },
47 ]; 47 ];
48 48
49 export const formSchema: FormSchema[] = [ 49 export const formSchema: FormSchema[] = [
@@ -71,7 +71,9 @@ export const formDetailSchema: FormSchema[] = [ @@ -71,7 +71,9 @@ export const formDetailSchema: FormSchema[] = [
71 field: 'ssl', 71 field: 'ssl',
72 component: 'RadioGroup', 72 component: 'RadioGroup',
73 rules: [{ required: true, message: '流媒体部署环境为必填项', type: 'number' }], 73 rules: [{ required: true, message: '流媒体部署环境为必填项', type: 'number' }],
  74 + defaultValue: PlayProtocol.HTTP,
74 componentProps: { 75 componentProps: {
  76 + defaultValue: PlayProtocol.HTTP,
75 options: [ 77 options: [
76 { label: 'http', value: PlayProtocol.HTTP }, 78 { label: 'http', value: PlayProtocol.HTTP },
77 { label: 'https', value: PlayProtocol.HTTPS }, 79 { label: 'https', value: PlayProtocol.HTTPS },