Commit a56a0c81aa14a611211eec29ad66ebbf0ddb814a
Merge branch 'fix/configuration-component' into 'main_dev'
perf: 优化未绑定页面时显示空数据 See merge request yunteng/thingskit-view!146
Showing
1 changed file
with
36 additions
and
3 deletions
@@ -9,7 +9,11 @@ | @@ -9,7 +9,11 @@ | ||
9 | </path> | 9 | </path> |
10 | </svg> | 10 | </svg> |
11 | </div> | 11 | </div> |
12 | - <iframe id="iframeContent" :src="iframeLink" :width="w" :height="h" style="border-width: 0"></iframe> | 12 | + <iframe v-if="iframeLink" id="iframeContent" :src="iframeLink" :width="w" :height="h" |
13 | + style="border-width: 0"></iframe> | ||
14 | + <n-empty v-else class="empty" size="huge" description="暂未绑定页面"> | ||
15 | + | ||
16 | + </n-empty> | ||
13 | </div> | 17 | </div> |
14 | </template> | 18 | </template> |
15 | 19 | ||
@@ -57,8 +61,8 @@ watch( | @@ -57,8 +61,8 @@ watch( | ||
57 | () => props.chartConfig.option.dataset, | 61 | () => props.chartConfig.option.dataset, |
58 | (newData: string) => { | 62 | (newData: string) => { |
59 | const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption | 63 | const { dataset, publicId, organizationId, platform, isShare } = props.chartConfig.option as typeof typeOption |
60 | - | ||
61 | - if(!dataset) return | 64 | + |
65 | + if (!dataset) return | ||
62 | iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false) | 66 | iframeLink.value = createScadaPageLink({ id: dataset, platform, publicId, organizationId, }, isShare ? ScadaModeEnum.SHARE : ScadaModeEnum.LIGHTBOX, false) |
63 | }, | 67 | }, |
64 | { | 68 | { |
@@ -95,4 +99,33 @@ const handleMouseleave = () => (isShowSvg.value = false) | @@ -95,4 +99,33 @@ const handleMouseleave = () => (isShowSvg.value = false) | ||
95 | right: 0.1vw; | 99 | right: 0.1vw; |
96 | } | 100 | } |
97 | } | 101 | } |
102 | + | ||
103 | +.empty { | ||
104 | + width: 100%; | ||
105 | + height: 100%; | ||
106 | + display: flex; | ||
107 | + justify-content: center; | ||
108 | + align-items: center; | ||
109 | + | ||
110 | + --size: 120px; | ||
111 | + | ||
112 | + @include deep() { | ||
113 | + .n-empty__icon { | ||
114 | + width: var(--size); | ||
115 | + height: var(--size); | ||
116 | + | ||
117 | + .n-base-icon { | ||
118 | + width: var(--size); | ||
119 | + height: var(--size); | ||
120 | + | ||
121 | + svg { | ||
122 | + width: var(--size); | ||
123 | + height: var(--size); | ||
124 | + } | ||
125 | + } | ||
126 | + } | ||
127 | + } | ||
128 | + | ||
129 | + | ||
130 | +} | ||
98 | </style> | 131 | </style> |