Showing
6 changed files
with
226 additions
and
29 deletions
1 | 1 | import { defHttp } from '@/utils/external/http/axios' |
2 | -import { DictItem, UploadResponse } from './model' | |
2 | +import { DictItem, OrganizationListItem, UploadResponse } from './model' | |
3 | 3 | |
4 | 4 | enum Api { |
5 | 5 | GET_DICT = '/dict_item', |
... | ... | @@ -8,7 +8,9 @@ enum Api { |
8 | 8 | AREALIST = '/area/list', |
9 | 9 | PLATFORM = '/platform/get', |
10 | 10 | CONFIGURATION = '/configuration/center', |
11 | - CONFIGURATION_SHARE = '/configuration/center/share/' | |
11 | + CONFIGURATION_SHARE = '/configuration/center/share/', | |
12 | + BASEORIGINATION = '/organization/me/list/', | |
13 | + VIDEO = '/video/list' | |
12 | 14 | } |
13 | 15 | |
14 | 16 | export const getDictItemByCode = (value: string) => { |
... | ... | @@ -48,7 +50,7 @@ export const getConfigurationList = (params: object) => { |
48 | 50 | } |
49 | 51 | |
50 | 52 | //组态设置是否公开或私有 |
51 | -export const setConfigurationIsShare = (params: string,isShare:boolean,data:object) => { | |
53 | +export const setConfigurationIsShare = (params: string, isShare: boolean, data: object) => { | |
52 | 54 | return defHttp.post({ |
53 | 55 | url: `${Api.CONFIGURATION_SHARE}${params}?isShare=${isShare}`, |
54 | 56 | data |
... | ... | @@ -59,10 +61,24 @@ export const setConfigurationIsShare = (params: string,isShare:boolean,data:obje |
59 | 61 | export const getDeviceActiveTime = (entityId: string) => { |
60 | 62 | return defHttp.get( |
61 | 63 | { |
62 | - url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys=active`, | |
64 | + url: `/plugins/telemetry/DEVICE/${entityId}/values/attributes?keys=active` | |
63 | 65 | }, |
64 | 66 | { |
65 | - joinPrefix: false, | |
67 | + joinPrefix: false | |
66 | 68 | } |
67 | - ); | |
68 | -}; | |
\ No newline at end of file | ||
69 | + ) | |
70 | +} | |
71 | + | |
72 | +//获取组织列表 | |
73 | +export const getOrganizationList = (params?: OrganizationListItem) => | |
74 | + defHttp.get({ | |
75 | + url: Api.BASEORIGINATION, | |
76 | + params | |
77 | + }) | |
78 | + | |
79 | +//获取视频列表 | |
80 | +export const getVideoList = (params?:object) => | |
81 | + defHttp.get({ | |
82 | + url: Api.VIDEO, | |
83 | + params | |
84 | + }) | ... | ... |
... | ... | @@ -3,10 +3,17 @@ import { CreateComponentType } from '@/packages/index.d' |
3 | 3 | import { CameraConfig } from './index' |
4 | 4 | import cloneDeep from 'lodash/cloneDeep' |
5 | 5 | |
6 | +export enum sourceTypeEnum { | |
7 | + CUSTOM = 'custom', | |
8 | + PLATFORM = 'platform' | |
9 | +} | |
10 | + | |
6 | 11 | export const option = { |
7 | 12 | dataset: [ |
8 | 13 | { |
9 | - url: '' | |
14 | + url: '', | |
15 | + sourceType: 'custom', | |
16 | + organization: '' | |
10 | 17 | } |
11 | 18 | ] as any, |
12 | 19 | // 自动播放的间隔(ms) | ... | ... |
1 | 1 | <template> |
2 | 2 | <CollapseItem name="播放器配置" :expanded="true"> |
3 | - <setting-item-box name="源地址" :alone="true"> | |
4 | - <setting-item v-for="(item, index) in optionData.dataset" :key="index"> | |
5 | - <n-input-group> | |
6 | - <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input> | |
7 | - <n-button ghost @click="optionData.dataset.splice(index, 1)"> - </n-button> | |
8 | - </n-input-group> | |
9 | - </setting-item> | |
10 | - <setting-item> | |
11 | - <n-button v-if="optionData.dataset.length < 9" size="small" @click="optionData.dataset.push({ url: '' })"> | |
12 | - + | |
13 | - </n-button> | |
14 | - </setting-item> | |
15 | - </setting-item-box> | |
3 | + <template v-for="(item, index) in optionData.dataset" :key="index"> | |
4 | + <setting-item-box name="源类型" :alone="true"> | |
5 | + <setting-item> | |
6 | + <n-radio-group @change="handleChecked($event, item)" v-model:value="item.sourceType" name="radiogroup"> | |
7 | + <n-space> | |
8 | + <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value"> | |
9 | + {{ item.label }} | |
10 | + </n-radio> | |
11 | + </n-space> | |
12 | + </n-radio-group> | |
13 | + </setting-item> | |
14 | + </setting-item-box> | |
15 | + <setting-item-box v-if="item.sourceType === sourceTypeEnum.CUSTOM" name="源地址" :alone="true"> | |
16 | + <setting-item> | |
17 | + <n-input-group> | |
18 | + <n-input v-model:value="item.url" size="small" placeholder="请输入源地址"></n-input> | |
19 | + </n-input-group> | |
20 | + </setting-item> | |
21 | + </setting-item-box> | |
22 | + <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="组织" :alone="true"> | |
23 | + <setting-item> | |
24 | + <n-tree-select | |
25 | + placement="top-start" | |
26 | + label-field="name" | |
27 | + v-model:value="item.organization" | |
28 | + key-field="id" | |
29 | + children-field="children" | |
30 | + :options="originationOption" | |
31 | + @update:value="handleUpdateTreeValue($event, item)" | |
32 | + /> | |
33 | + </setting-item> | |
34 | + </setting-item-box> | |
35 | + <setting-item-box v-if="item.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true"> | |
36 | + <setting-item> | |
37 | + <n-select v-model:value="item.url" :options="videoOptions" /> | |
38 | + </setting-item> | |
39 | + </setting-item-box> | |
40 | + <n-button size="small" @click="optionData.dataset.splice(index, 1)"> - </n-button> | |
41 | + </template> | |
42 | + <n-button | |
43 | + style="margin-left: 10px" | |
44 | + v-if="optionData.dataset.length < 9" | |
45 | + size="small" | |
46 | + @click="optionData.dataset.push({ url: '', sourceType: 'custom', organization: '' })" | |
47 | + > | |
48 | + + | |
49 | + </n-button> | |
16 | 50 | </CollapseItem> |
17 | 51 | </template> |
18 | 52 | |
19 | 53 | <script setup lang="ts"> |
20 | -import { PropType } from 'vue' | |
21 | -import { option } from './config' | |
54 | +import { PropType, ref, onMounted } from 'vue' | |
55 | +import { option, sourceTypeEnum } from './config' | |
22 | 56 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
57 | +import { getOrganizationList, getVideoList } from '@/api/external/common/index' | |
58 | +import { NTreeSelect } from 'naive-ui' | |
23 | 59 | |
24 | -defineProps({ | |
60 | +const props = defineProps({ | |
25 | 61 | optionData: { |
26 | 62 | type: Object as PropType<typeof option>, |
27 | 63 | required: true |
28 | 64 | } |
29 | 65 | }) |
66 | + | |
67 | +const sourceTypes = [ | |
68 | + { | |
69 | + value: 'custom', | |
70 | + label: '自定义' | |
71 | + }, | |
72 | + { | |
73 | + value: 'platform', | |
74 | + label: '平台获取' | |
75 | + } | |
76 | +] | |
77 | + | |
78 | +const originationOption = ref([]) | |
79 | + | |
80 | +const videoOptions = ref([]) | |
81 | + | |
82 | +const getOriginationList = async () => { | |
83 | + const res = await getOrganizationList() | |
84 | + originationOption.value = res | |
85 | +} | |
86 | + | |
87 | +const handleUpdateTreeValue = (e: any, value: object) => { | |
88 | + getVideoLists(e) | |
89 | +} | |
90 | + | |
91 | +const getVideoLists = async (organizationId: string) => { | |
92 | + const res = await getVideoList({ organizationId }) | |
93 | + videoOptions.value = res?.data?.map((item: any) => ({ label: item.name, value: item.videoUrl })) | |
94 | +} | |
95 | + | |
96 | +const handleChecked = ({ target }: any, values: object) => { | |
97 | + const { value } = target | |
98 | + if (value === sourceTypeEnum.PLATFORM) { | |
99 | + getOriginationList() | |
100 | + } | |
101 | +} | |
102 | + | |
103 | +onMounted(() => { | |
104 | + props.optionData.dataset.forEach((item: any) => { | |
105 | + if (item.sourceType === sourceTypeEnum.PLATFORM) { | |
106 | + getOriginationList() | |
107 | + if (item.organization) { | |
108 | + getVideoLists(item.organization) | |
109 | + } | |
110 | + } | |
111 | + }) | |
112 | +}) | |
30 | 113 | </script> | ... | ... |
... | ... | @@ -3,10 +3,17 @@ import { CreateComponentType } from '@/packages/index.d' |
3 | 3 | import { SingleCameraConfig } from './index' |
4 | 4 | import cloneDeep from 'lodash/cloneDeep' |
5 | 5 | |
6 | +export enum sourceTypeEnum { | |
7 | + CUSTOM = 'custom', | |
8 | + PLATFORM = 'platform' | |
9 | +} | |
10 | + | |
6 | 11 | export const option = { |
7 | 12 | dataset: '', |
8 | 13 | autoplay: false, |
9 | - poster: '' | |
14 | + poster: '', | |
15 | + sourceType: 'custom', | |
16 | + organization: '' | |
10 | 17 | } |
11 | 18 | |
12 | 19 | export default class Config extends PublicConfigClass implements CreateComponentType { | ... | ... |
... | ... | @@ -22,13 +22,42 @@ |
22 | 22 | </n-card> |
23 | 23 | </setting-item> |
24 | 24 | </setting-item-box> |
25 | - <setting-item-box name="源地址" :alone="true"> | |
25 | + <setting-item-box name="源类型" :alone="true"> | |
26 | + <setting-item> | |
27 | + <n-radio-group @change="handleChecked" v-model:value="optionData.sourceType" name="radiogroup"> | |
28 | + <n-space> | |
29 | + <n-radio v-for="(item, index) in sourceTypes" :key="item.value" :value="item.value"> | |
30 | + {{ item.label }} | |
31 | + </n-radio> | |
32 | + </n-space> | |
33 | + </n-radio-group> | |
34 | + </setting-item> | |
35 | + </setting-item-box> | |
36 | + <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.CUSTOM" name="源地址" :alone="true"> | |
26 | 37 | <setting-item> |
27 | 38 | <n-input-group> |
28 | 39 | <n-input v-model:value="optionData.dataset" size="small" placeholder="请输入源地址"></n-input> |
29 | 40 | </n-input-group> |
30 | 41 | </setting-item> |
31 | 42 | </setting-item-box> |
43 | + <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="组织" :alone="true"> | |
44 | + <setting-item> | |
45 | + <n-tree-select | |
46 | + placement="top-start" | |
47 | + label-field="name" | |
48 | + v-model:value="optionData.organization" | |
49 | + key-field="id" | |
50 | + children-field="children" | |
51 | + :options="originationOption" | |
52 | + @update:value="handleUpdateTreeValue" | |
53 | + /> | |
54 | + </setting-item> | |
55 | + </setting-item-box> | |
56 | + <setting-item-box v-if="optionData.sourceType === sourceTypeEnum.PLATFORM" name="视频" :alone="true"> | |
57 | + <setting-item> | |
58 | + <n-select v-model:value="optionData.dataset" :options="videoOptions" /> | |
59 | + </setting-item> | |
60 | + </setting-item-box> | |
32 | 61 | <setting-item-box name="自动播放"> |
33 | 62 | <setting-item> |
34 | 63 | <n-switch v-model:value="optionData.autoplay" size="small" /> |
... | ... | @@ -38,14 +67,15 @@ |
38 | 67 | </template> |
39 | 68 | |
40 | 69 | <script setup lang="ts"> |
41 | -import { PropType, ref, nextTick } from 'vue' | |
42 | -import { option } from './config' | |
70 | +import { PropType, ref, nextTick, onMounted } from 'vue' | |
71 | +import { option, sourceTypeEnum } from './config' | |
43 | 72 | import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' |
44 | 73 | import { FileTypeEnum } from '@/enums/fileTypeEnum' |
45 | 74 | import { uploadFile } from '@/api/external/contentSave/content' |
46 | -import { UploadCustomRequestOptions } from 'naive-ui' | |
75 | +import { UploadCustomRequestOptions, NTreeSelect } from 'naive-ui' | |
47 | 76 | import { backgroundImageSize } from '@/settings/designSetting' |
48 | 77 | import { fetchRouteParamsLocation } from '@/utils' |
78 | +import { getOrganizationList, getVideoList } from '@/api/external/common/index' | |
49 | 79 | |
50 | 80 | const props = defineProps({ |
51 | 81 | optionData: { |
... | ... | @@ -56,6 +86,52 @@ const props = defineProps({ |
56 | 86 | |
57 | 87 | const uploadFileListRef = ref() |
58 | 88 | |
89 | +const sourceTypes = [ | |
90 | + { | |
91 | + value: 'custom', | |
92 | + label: '自定义' | |
93 | + }, | |
94 | + { | |
95 | + value: 'platform', | |
96 | + label: '平台获取' | |
97 | + } | |
98 | +] | |
99 | + | |
100 | +const originationOption = ref([]) | |
101 | + | |
102 | +const videoOptions = ref([]) | |
103 | + | |
104 | +const getOriginationList = async () => { | |
105 | + const res = await getOrganizationList() | |
106 | + originationOption.value = res | |
107 | +} | |
108 | + | |
109 | +const handleUpdateTreeValue = (value: string) => { | |
110 | + props.optionData.dataset = '' | |
111 | + getVideoLists(value) | |
112 | +} | |
113 | + | |
114 | +const getVideoLists = async (organizationId: string) => { | |
115 | + const res = await getVideoList({ organizationId }) | |
116 | + videoOptions.value = res?.data?.map((item: any) => ({ label: item.name, value: item.videoUrl })) | |
117 | +} | |
118 | + | |
119 | +const handleChecked = ({ target }: any) => { | |
120 | + const { value } = target | |
121 | + if (value === sourceTypeEnum.PLATFORM) { | |
122 | + getOriginationList() | |
123 | + } | |
124 | +} | |
125 | + | |
126 | +onMounted(() => { | |
127 | + if (props.optionData.sourceType === sourceTypeEnum.PLATFORM) { | |
128 | + getOriginationList() | |
129 | + if (props.optionData.organization) { | |
130 | + getVideoLists(props.optionData.organization) | |
131 | + } | |
132 | + } | |
133 | +}) | |
134 | + | |
59 | 135 | // 上传图片前置处理 |
60 | 136 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment |
61 | 137 | //@ts-ignore | ... | ... |