简柏林 / thingskit-front · Commits

Commit 71a5b5a88a15381501daa15d9aa752ba81da7ebe

Authored by loveumiko
1 parent 444d7d51

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

Inline Side-by-side
Showing 11 changed files with 56 additions and 27 deletions
@@ -171,7 +171,7 @@ @@ -171,7 +171,7 @@
171 171
172 const resize = async () => { 172 const resize = async () => {
173 const { height } = unref(getContainerSize); 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 await nextTick(); 175 await nextTick();
176 redoHeight(); 176 redoHeight();
177 }; 177 };
@@ -216,10 +216,13 @@ @@ -216,10 +216,13 @@
216 :class="!getDesign.showTime && 'p-5'" 216 :class="!getDesign.showTime && 'p-5'"
217 > 217 >
218 <DeviceName :config="config" /> 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 <UpdateTime v-if="getDesign.showTime" :time="time" /> 226 <UpdateTime v-if="getDesign.showTime" :time="time" />
224 </main> 227 </main>
225 </template> 228 </template>
@@ -226,10 +226,13 @@ @@ -226,10 +226,13 @@
226 :class="!getDesign.showTime && 'p-5'" 226 :class="!getDesign.showTime && 'p-5'"
227 > 227 >
228 <DeviceName :config="config" /> 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 <UpdateTime v-if="getDesign.showTime" :time="time" /> 236 <UpdateTime v-if="getDesign.showTime" :time="time" />
234 </main> 237 </main>
235 </template> 238 </template>
@@ -316,7 +316,8 @@ @@ -316,7 +316,8 @@
316 <template> 316 <template>
317 <main class="w-full h-full flex flex-col justify-center items-center"> 317 <main class="w-full h-full flex flex-col justify-center items-center">
318 <DeviceName :config="config" /> 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 <!-- <UpdateTime :time="time" /> --> 321 <!-- <UpdateTime :time="time" /> -->
321 </main> 322 </main>
322 </template> 323 </template>
@@ -208,10 +208,13 @@ @@ -208,10 +208,13 @@
208 :class="!getDesign.showTime && 'p-5'" 208 :class="!getDesign.showTime && 'p-5'"
209 > 209 >
210 <DeviceName :config="config" /> 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 <UpdateTime v-if="getDesign.showTime" :time="time" /> 218 <UpdateTime v-if="getDesign.showTime" :time="time" />
216 </main> 219 </main>
217 </template> 220 </template>
@@ -235,10 +235,13 @@ @@ -235,10 +235,13 @@
235 :class="!getDesign.showTime && 'p-5'" 235 :class="!getDesign.showTime && 'p-5'"
236 > 236 >
237 <DeviceName :config="config" /> 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 <UpdateTime v-show="getDesign.showTime" :time="time" /> 245 <UpdateTime v-show="getDesign.showTime" :time="time" />
243 </main> 246 </main>
244 </template> 247 </template>
@@ -215,9 +215,12 @@ @@ -215,9 +215,12 @@
215 :class="!getDesign.showTime && 'p-5'" 215 :class="!getDesign.showTime && 'p-5'"
216 > 216 >
217 <DeviceName :config="config" /> 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 </div> 224 </div>
222 <UpdateTime v-show="getDesign.showTime" :time="time" /> 225 <UpdateTime v-show="getDesign.showTime" :time="time" />
223 </main> 226 </main>
@@ -159,6 +159,7 @@ @@ -159,6 +159,7 @@
159 }); 159 });
160 160
161 const resize = async () => { 161 const resize = async () => {
  162 + console.log(123321);
162 await nextTick(); 163 await nextTick();
163 164
164 // 修改echarts大小 165 // 修改echarts大小
@@ -178,7 +179,11 @@ @@ -178,7 +179,11 @@
178 <template> 179 <template>
179 <main class="w-full h-full flex flex-col justify-center items-center"> 180 <main class="w-full h-full flex flex-col justify-center items-center">
180 <DeviceName :config="config" /> 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 <!-- <UpdateTime :time="time" /> --> 187 <!-- <UpdateTime :time="time" /> -->
183 </main> 188 </main>
184 </template> 189 </template>
@@ -180,7 +180,11 @@ @@ -180,7 +180,11 @@
180 <template> 180 <template>
181 <main class="w-full h-full flex flex-col justify-center items-center"> 181 <main class="w-full h-full flex flex-col justify-center items-center">
182 <DeviceName :config="config" /> 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 <!-- <UpdateTime :time="time" /> --> 188 <!-- <UpdateTime :time="time" /> -->
185 </main> 189 </main>
186 </template> 190 </template>
@@ -137,7 +137,7 @@ @@ -137,7 +137,7 @@
137 }); 137 });
138 const resize = async () => { 138 const resize = async () => {
139 const { height } = unref(getContainerSize); 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 await nextTick(); 142 await nextTick();
143 redoHeight(); 143 redoHeight();
@@ -52,7 +52,7 @@ @@ -52,7 +52,7 @@
52 top: '30%', 52 top: '30%',
53 left: '6%', 53 left: '6%',
54 right: '10%', 54 right: '10%',
55 - bottom: '1%', 55 + bottom: '8%',
56 containLabel: true, 56 containLabel: true,
57 }, 57 },
58 xAxis: { 58 xAxis: {
@@ -206,9 +206,13 @@ @@ -206,9 +206,13 @@
206 </script> 206 </script>
207 207
208 <template> 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 <DeviceName :config="config" /> 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 <!-- <UpdateTime :time="time" /> --> 216 <!-- <UpdateTime :time="time" /> -->
213 </main> 217 </main>
214 </template> 218 </template>