Showing
6 changed files
with
140 additions
and
70 deletions
1 | 1 | import { defHttp } from '@/utils/external/http/axios' |
2 | -import { DictItem, OrganizationListItem, UploadResponse } from './model' | |
2 | +import { ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model' | |
3 | +import { PaginationResult } from '/#/external/axios' | |
3 | 4 | |
4 | 5 | enum Api { |
5 | 6 | GET_DICT = '/dict_item', |
... | ... | @@ -54,7 +55,7 @@ export const getPlatformInfo = () => defHttp.get({ url: Api.PLATFORM }) |
54 | 55 | |
55 | 56 | //获取组态列表 |
56 | 57 | export const getConfigurationList = (params: object) => { |
57 | - return defHttp.get({ url: `${Api.CONFIGURATION}`, params }) | |
58 | + return defHttp.get<PaginationResult<ConfigurationItemType>>({ url: `${Api.CONFIGURATION}`, params }) | |
58 | 59 | } |
59 | 60 | |
60 | 61 | //组态设置是否公开或私有 |
... | ... | @@ -145,4 +146,4 @@ export const getProfileAttrs = (params: { deviceProfileId: string; dataType?: st |
145 | 146 | url: `${Api.DEVICE_ATTR}/${deviceProfileId}`, |
146 | 147 | params: { dataType }, |
147 | 148 | }); |
148 | -}; | |
\ No newline at end of file | ||
149 | +}; | ... | ... |
... | ... | @@ -23,4 +23,34 @@ export interface OrganizationListItem { |
23 | 23 | name: string; |
24 | 24 | parentId?: string; |
25 | 25 | remark: string; |
26 | -} | |
\ No newline at end of file | ||
26 | +} | |
27 | + | |
28 | +export interface ConfigurationItemType { | |
29 | + id: string | |
30 | + creator: string | |
31 | + createTime: string | |
32 | + name: string | |
33 | + enabled: boolean | |
34 | + tenantId: string | |
35 | + viewType: string | |
36 | + organizationId: string | |
37 | + platform: string | |
38 | + organizationDTO: OrganizationDto | |
39 | + publicId?: string | |
40 | + productAndDevice: ProductAndDevice[] | |
41 | +} | |
42 | + | |
43 | +export interface OrganizationDto { | |
44 | + name: string | |
45 | + enabled: boolean | |
46 | + sort: number | |
47 | + children: any[] | |
48 | +} | |
49 | + | |
50 | +export interface ProductAndDevice { | |
51 | + name: string | |
52 | + profileId: string | |
53 | + deviceList: any | |
54 | + deviceType: string | |
55 | + transportType: string | |
56 | +} | ... | ... |
... | ... | @@ -3,14 +3,19 @@ import {CreateComponentType} from '@/packages/index.d' |
3 | 3 | import {chartInitConfig} from '@/settings/designSetting' |
4 | 4 | import {OverrideILoadConfigurationframeConfig} from './index' |
5 | 5 | import cloneDeep from 'lodash/cloneDeep' |
6 | +import { Platform } from './help' | |
6 | 7 | |
7 | 8 | export const enum shareEnum { |
8 | 9 | PRIVATE_VIEW = "PRIVATE_VIEW", |
10 | + PUBLIC_VIEW = 'PUBLIC_VIEW' | |
9 | 11 | } |
10 | 12 | |
11 | 13 | export const option = { |
12 | 14 | // 网站路径 |
13 | 15 | dataset: '', |
16 | + organizationId: '', | |
17 | + platform: Platform.PC, | |
18 | + publicId: '' as (undefined | string), | |
14 | 19 | // 圆角 |
15 | 20 | borderRadius: 10, |
16 | 21 | pages: { | ... | ... |
... | ... | @@ -3,24 +3,19 @@ |
3 | 3 | <setting-item-box name="路径" :alone="true"> |
4 | 4 | <setting-item name="请选择要加载的组态"> |
5 | 5 | <n-select label-in-value @change="handleUpdateValue" filterable size="small" v-model:value="optionData.dataset" |
6 | - :options="configurationOptions"/> | |
6 | + :options="configurationOptions" /> | |
7 | 7 | </setting-item> |
8 | 8 | </setting-item-box> |
9 | 9 | <setting-item-box name="是否公开"> |
10 | 10 | <setting-item> |
11 | 11 | <div style="display:flex"> |
12 | - <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small"/> | |
12 | + <n-switch @change="handleChange" v-model:value="optionData.isShare" size="small" /> | |
13 | 13 | </div> |
14 | 14 | </setting-item> |
15 | 15 | </setting-item-box> |
16 | 16 | <setting-item-box name="样式"> |
17 | 17 | <setting-item name="圆角"> |
18 | - <n-input-number | |
19 | - v-model:value="optionData.borderRadius" | |
20 | - size="small" | |
21 | - :min="0" | |
22 | - placeholder="圆角" | |
23 | - ></n-input-number> | |
18 | + <n-input-number v-model:value="optionData.borderRadius" size="small" :min="0" placeholder="圆角"></n-input-number> | |
24 | 19 | </setting-item> |
25 | 20 | </setting-item-box> |
26 | 21 | <setting-item-box name="分页"> |
... | ... | @@ -28,13 +23,8 @@ |
28 | 23 | <n-input-number v-model:value="optionData.pages.page" size="small" :min="1" placeholder="页码"></n-input-number> |
29 | 24 | </setting-item> |
30 | 25 | <setting-item name="页数"> |
31 | - <n-input-number | |
32 | - disabled | |
33 | - v-model:value="optionData.pages.pageSize" | |
34 | - size="small" | |
35 | - :min="10" | |
36 | - placeholder="页数" | |
37 | - ></n-input-number> | |
26 | + <n-input-number disabled v-model:value="optionData.pages.pageSize" size="small" :min="10" | |
27 | + placeholder="页数"></n-input-number> | |
38 | 28 | </setting-item> |
39 | 29 | </setting-item-box> |
40 | 30 | <setting-item-box name="颜色" :alone="true"> |
... | ... | @@ -49,11 +39,12 @@ |
49 | 39 | </template> |
50 | 40 | |
51 | 41 | <script setup lang="ts"> |
52 | -import {PropType, onMounted, ref, watch} from 'vue' | |
53 | -import {option, shareEnum} from './config' | |
54 | -import {CollapseItem, SettingItemBox, SettingItem} from '@/components/Pages/ChartItemSetting' | |
55 | -import {getConfigurationList, setConfigurationIsShare} from '@/api/external/common/index' | |
56 | -import {SelectOption} from 'naive-ui' | |
42 | +import { PropType, onMounted, ref, watch } from 'vue' | |
43 | +import { option, shareEnum } from './config' | |
44 | +import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' | |
45 | +import { getConfigurationList, setConfigurationIsShare } from '@/api/external/common/index' | |
46 | +import { ConfigurationItemType } from '@/api/external/common/model' | |
47 | +import { Platform } from './help' | |
57 | 48 | |
58 | 49 | const props = defineProps({ |
59 | 50 | optionData: { |
... | ... | @@ -62,44 +53,40 @@ const props = defineProps({ |
62 | 53 | } |
63 | 54 | }) |
64 | 55 | |
65 | -const configurationOptions = ref([]) | |
56 | +const configurationOptions = ref<ConfigurationItemType[]>([]) | |
66 | 57 | |
67 | 58 | const configurationId = ref('') |
68 | 59 | |
69 | 60 | const getConfigurationOptions = async (params: object) => { |
70 | - const {items} = await getConfigurationList(params) | |
61 | + const { items } = await getConfigurationList(params) | |
71 | 62 | if (items) { |
72 | - configurationOptions.value = items.map((item: SelectOption) => ({ | |
63 | + configurationOptions.value = items.map((item) => ({ | |
73 | 64 | label: item.name, |
74 | 65 | value: item.id, |
75 | - viewType: item.viewType | |
66 | + ...item | |
76 | 67 | })) |
77 | 68 | } |
78 | 69 | } |
79 | 70 | |
80 | 71 | watch( |
81 | - () => props.optionData.pages, | |
82 | - (newData: any) => { | |
83 | - getConfigurationOptions({page: newData.page, pageSize: newData.pageSize}) | |
84 | - }, | |
85 | - { | |
86 | - deep: true, | |
87 | - immediate: true | |
88 | - } | |
72 | + () => props.optionData.pages, | |
73 | + (newData: any) => { | |
74 | + getConfigurationOptions({ page: newData.page, pageSize: newData.pageSize }) | |
75 | + }, | |
76 | + { | |
77 | + deep: true, | |
78 | + immediate: true | |
79 | + } | |
89 | 80 | ) |
90 | 81 | |
91 | 82 | onMounted(() => { |
92 | - getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize}) | |
83 | + getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize }) | |
93 | 84 | }) |
94 | 85 | |
95 | -const handleUpdateValue = (value: string, options: SelectOption) => { | |
96 | - const {viewType} = options | |
86 | +const handleUpdateValue = (value: string, options: ConfigurationItemType) => { | |
87 | + const { viewType, organizationId, publicId, platform } = options | |
97 | 88 | configurationId.value = value |
98 | - if (viewType === shareEnum.PRIVATE_VIEW) { | |
99 | - props.optionData.isShare = false | |
100 | - } else { | |
101 | - props.optionData.isShare = true | |
102 | - } | |
89 | + Object.assign(props.optionData, { isShare: viewType === shareEnum.PUBLIC_VIEW, organizationId, platform, publicId } as typeof option) | |
103 | 90 | } |
104 | 91 | |
105 | 92 | const handleChange = async (value: boolean) => { |
... | ... | @@ -108,7 +95,7 @@ const handleChange = async (value: boolean) => { |
108 | 95 | }) |
109 | 96 | if (res) { |
110 | 97 | window.$message.success('操作成功!') |
111 | - await getConfigurationOptions({page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize}) | |
98 | + await getConfigurationOptions({ page: props.optionData.pages.page, pageSize: props.optionData.pages.pageSize }) | |
112 | 99 | } |
113 | 100 | } |
114 | 101 | </script> | ... | ... |
src/packages/components/external/Informations/Mores/OverrideILoadConfigurationframe/help.ts
0 → 100644
1 | + | |
2 | +export enum ScadaModeEnum { | |
3 | + LIGHTBOX = 'lightbox', | |
4 | + DESIGN = 'design', | |
5 | + SHARE = 'share', | |
6 | +} | |
7 | + | |
8 | +export enum Platform { | |
9 | + PHONE = 'phone', | |
10 | + PC = 'pc', | |
11 | +} | |
12 | + | |
13 | +interface ScadaLinkParamsType { | |
14 | + configurationId: string; | |
15 | + organizationId: string; | |
16 | + mode: ScadaModeEnum; | |
17 | + platform: Platform; | |
18 | + publicId?: string; | |
19 | +} | |
20 | + | |
21 | +const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36); | |
22 | + | |
23 | +export const encode = (record: Recordable) => { | |
24 | + let hash = JSON.stringify(record); | |
25 | + const mixinString = getRandomString() | |
26 | + .slice(0, 10) | |
27 | + .padEnd(10, getRandomString()) | |
28 | + .split('') | |
29 | + .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item)) | |
30 | + .join(''); | |
31 | + hash = window.btoa(hash); | |
32 | + hash = hash.substring(0, 6) + mixinString + hash.substring(6); | |
33 | + hash = window.btoa(hash); | |
34 | + return hash; | |
35 | +}; | |
36 | + | |
37 | + | |
38 | +export const createScadaPageLink = ( | |
39 | + record: Partial<Record<'id' | 'organizationId' | 'platform' | 'publicId', string>>, | |
40 | + mode: ScadaModeEnum = ScadaModeEnum.DESIGN, | |
41 | + open = true | |
42 | +) => { | |
43 | + const params: ScadaLinkParamsType = { | |
44 | + configurationId: record.id!, | |
45 | + organizationId: record.organizationId!, | |
46 | + mode: mode, | |
47 | + platform: record.platform as Platform, | |
48 | + }; | |
49 | + | |
50 | + if (mode === ScadaModeEnum.SHARE) { | |
51 | + params.publicId = record.publicId; | |
52 | + } | |
53 | + | |
54 | + const href = new URL(location.origin); | |
55 | + href.pathname = '/thingskit-scada'; | |
56 | + href.hash = encode(params); | |
57 | + open && window.open(href.href); | |
58 | + return href.href; | |
59 | +}; | ... | ... |
1 | 1 | <template> |
2 | - <div | |
3 | - @mouseenter="handleMouseenter" | |
4 | - @mouseleave="handleMouseleave" | |
5 | - class="iframe-content" | |
6 | - :style="getStyle(borderRadius)" | |
7 | - > | |
2 | + <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="iframe-content" | |
3 | + :style="getStyle(borderRadius)"> | |
8 | 4 | <div v-show="isShowSvg" @click="handleFullScreen" id="fullscreenButton"> |
9 | - <svg | |
10 | - focusable="false" | |
11 | - data-icon="fullscreen" | |
12 | - width="4vw" | |
13 | - :style="`color:${color}`" | |
14 | - height="4vh" | |
15 | - fill="currentColor" | |
16 | - aria-hidden="true" | |
17 | - viewBox="64 64 896 896" | |
18 | - > | |
5 | + <svg focusable="false" data-icon="fullscreen" width="4vw" :style="`color:${color}`" height="4vh" fill="currentColor" | |
6 | + aria-hidden="true" viewBox="64 64 896 896"> | |
19 | 7 | <path |
20 | - d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z" | |
21 | - ></path> | |
8 | + d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"> | |
9 | + </path> | |
22 | 10 | </svg> |
23 | 11 | </div> |
24 | - <iframe id="iframeContent" :src="option.dataset" :width="w" :height="h" style="border-width: 0"></iframe> | |
12 | + <iframe id="iframeContent" :src="iframeLink" :width="w" :height="h" style="border-width: 0"></iframe> | |
25 | 13 | </div> |
26 | 14 | </template> |
27 | 15 | |
... | ... | @@ -32,6 +20,8 @@ import { CreateComponentType } from '@/packages/index.d' |
32 | 20 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
33 | 21 | import { useFullScreen } from '@/packages/components/external/Charts/utls/fullScreen' |
34 | 22 | import { isDevMode } from '@/utils/external/env' |
23 | +import { createScadaPageLink, ScadaModeEnum } from './help' | |
24 | +import { option as typeOption } from './config' | |
35 | 25 | |
36 | 26 | const props = defineProps({ |
37 | 27 | chartConfig: { |
... | ... | @@ -60,16 +50,14 @@ const getStyle = (radius: number) => { |
60 | 50 | |
61 | 51 | const isDev = isDevMode() |
62 | 52 | |
53 | +const iframeLink = ref('') | |
54 | + | |
63 | 55 | // 编辑更新 |
64 | 56 | watch( |
65 | 57 | () => props.chartConfig.option.dataset, |
66 | 58 | (newData: string) => { |
67 | - const currentHost = window.location.host | |
68 | - const currentProtocol = window.location.protocol | |
69 | - //预览 | |
70 | - option.dataset = `${currentProtocol}//${currentHost}/thingskit-scada/${ | |
71 | - isDev ? '?dev=1&' : '?' | |
72 | - }configurationId=${newData}&lightbox=1` | |
59 | + const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption | |
60 | + iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false) | |
73 | 61 | }, |
74 | 62 | { |
75 | 63 | immediate: true | ... | ... |