Commit 71a5b5a88a15381501daa15d9aa752ba81da7ebe

Authored by loveumiko
1 parent 444d7d51

fix: 修改看板组件缩放时的样式问题

... ... @@ -171,7 +171,7 @@
171 171
172 172 const resize = async () => {
173 173 const { height } = unref(getContainerSize);
174   - height && setProps({ maxHeight: height - 100, scroll: { x: 470, y: height - 100 } });
  174 + height && setProps({ maxHeight: height - 110, scroll: { x: 470, y: height - 110 } });
175 175 await nextTick();
176 176 redoHeight();
177 177 };
... ...
... ... @@ -216,10 +216,13 @@
216 216 :class="!getDesign.showTime && 'p-5'"
217 217 >
218 218 <DeviceName :config="config" />
219   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
220   - <div class="text-gray-500 text-xs text-center truncate">{{
221   - getDesign.attribute || '湿度'
222   - }}</div>
  219 + <div class="w-full h-full flex flex-1 flex-col justify-center items-center">
  220 + <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
  221 + </div>
  222 + <div class="text-gray-500 text-xs text-center truncate">{{
  223 + getDesign.attribute || '湿度'
  224 + }}</div>
  225 + </div>
223 226 <UpdateTime v-if="getDesign.showTime" :time="time" />
224 227 </main>
225 228 </template>
... ...
... ... @@ -226,10 +226,13 @@
226 226 :class="!getDesign.showTime && 'p-5'"
227 227 >
228 228 <DeviceName :config="config" />
229   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
230   - <div class="text-gray-500 text-xs text-center truncate">{{
231   - getDesign.attribute || '湿度'
232   - }}</div>
  229 + <div class="flex w-full h-full flex-col justify-center items-center flex-1">
  230 + <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex-col justify-center items-center flex">
  231 + </div>
  232 + <div class="text-gray-500 text-xs text-center truncate">{{
  233 + getDesign.attribute || '湿度'
  234 + }}</div>
  235 + </div>
233 236 <UpdateTime v-if="getDesign.showTime" :time="time" />
234 237 </main>
235 238 </template>
... ...
... ... @@ -316,7 +316,8 @@
316 316 <template>
317 317 <main class="w-full h-full flex flex-col justify-center items-center">
318 318 <DeviceName :config="config" />
319   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
  319 + <div ref="chartRefEl" class="flex-1 w-full h-full justify-center items-center flex-col flex">
  320 + </div>
320 321 <!-- <UpdateTime :time="time" /> -->
321 322 </main>
322 323 </template>
... ...
... ... @@ -208,10 +208,13 @@
208 208 :class="!getDesign.showTime && 'p-5'"
209 209 >
210 210 <DeviceName :config="config" />
211   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
212   - <div class="text-gray-500 text-xs text-center truncate">{{
213   - getDesign.attribute || '速度'
214   - }}</div>
  211 + <div class="flex flex-1 flex-col justify-center items-center w-full h-full">
  212 + <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
  213 + </div>
  214 + <div class="text-gray-500 text-xs text-center truncate">{{
  215 + getDesign.attribute || '速度'
  216 + }}</div>
  217 + </div>
215 218 <UpdateTime v-if="getDesign.showTime" :time="time" />
216 219 </main>
217 220 </template>
... ...
... ... @@ -235,10 +235,13 @@
235 235 :class="!getDesign.showTime && 'p-5'"
236 236 >
237 237 <DeviceName :config="config" />
238   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
239   - <div class="text-gray-500 text-xs text-center truncate">{{
240   - getDesign.attribute || '温度'
241   - }}</div>
  238 + <div class="w-full h-full flex justify-center items-center flex-1 flex-col">
  239 + <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex justify-center items-center flex-col">
  240 + </div>
  241 + <div class="text-gray-500 text-xs text-center truncate">{{
  242 + getDesign.attribute || '温度'
  243 + }}</div>
  244 + </div>
242 245 <UpdateTime v-show="getDesign.showTime" :time="time" />
243 246 </main>
244 247 </template>
... ...
... ... @@ -215,9 +215,12 @@
215 215 :class="!getDesign.showTime && 'p-5'"
216 216 >
217 217 <DeviceName :config="config" />
218   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
219   - <div class="text-center text-gray-500 text-xs truncate">
220   - {{ getDesign.attribute || '速度' }}
  218 + <div class="w-full h-full flex justify-center items-center flex-col flex-1">
  219 + <div ref="chartRefEl" class="flex-1 w-full h-6/7 flex flex-col justify-center items-center">
  220 + </div>
  221 + <div class="text-center text-gray-500 text-xs truncate">
  222 + {{ getDesign.attribute || '速度' }}
  223 + </div>
221 224 </div>
222 225 <UpdateTime v-show="getDesign.showTime" :time="time" />
223 226 </main>
... ...
... ... @@ -159,6 +159,7 @@
159 159 });
160 160
161 161 const resize = async () => {
  162 + console.log(123321);
162 163 await nextTick();
163 164
164 165 // 修改echarts大小
... ... @@ -178,7 +179,11 @@
178 179 <template>
179 180 <main class="w-full h-full flex flex-col justify-center items-center">
180 181 <DeviceName :config="config" />
181   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
  182 + <div
  183 + ref="chartRefEl"
  184 + class="flex-1 w-full h-7/8 flex justify-center items-center flex-col mb-3"
  185 + >
  186 + </div>
182 187 <!-- <UpdateTime :time="time" /> -->
183 188 </main>
184 189 </template>
... ...
... ... @@ -180,7 +180,11 @@
180 180 <template>
181 181 <main class="w-full h-full flex flex-col justify-center items-center">
182 182 <DeviceName :config="config" />
183   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
  183 + <div
  184 + ref="chartRefEl"
  185 + class="flex-1 w-full h-full flex flex-col justify-center items-center mb-3"
  186 + >
  187 + </div>
184 188 <!-- <UpdateTime :time="time" /> -->
185 189 </main>
186 190 </template>
... ...
... ... @@ -137,7 +137,7 @@
137 137 });
138 138 const resize = async () => {
139 139 const { height } = unref(getContainerSize);
140   - height && setProps({ maxHeight: height - 100, scroll: { x: 470, y: height - 100 } });
  140 + height && setProps({ maxHeight: height - 110, scroll: { x: 470, y: height - 110 } });
141 141
142 142 await nextTick();
143 143 redoHeight();
... ...
... ... @@ -52,7 +52,7 @@
52 52 top: '30%',
53 53 left: '6%',
54 54 right: '10%',
55   - bottom: '1%',
  55 + bottom: '8%',
56 56 containLabel: true,
57 57 },
58 58 xAxis: {
... ... @@ -206,9 +206,13 @@
206 206 </script>
207 207
208 208 <template>
209   - <main class="w-full h-full flex flex-col justify-center items-center">
  209 + <main class="w-full h-full flex flex-col justify-center items-center flex-1">
210 210 <DeviceName :config="config" />
211   - <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
  211 + <div
  212 + ref="chartRefEl"
  213 + class="flex-1 w-full h-7/8 flex-col justify-center items-center flex mb-3"
  214 + >
  215 + </div>
212 216 <!-- <UpdateTime :time="time" /> -->
213 217 </main>
214 218 </template>
... ...