简柏林 / thingskit-front · Commits

Commit 1a372647ae312f09f7cbb7b06d820ba30dc08e38

Authored by ww
1 parent 7cc31f38

fix: data board component font weight

Inline Side-by-side
Showing 9 changed files with 67 additions and 41 deletions
@@ -14,9 +14,9 @@ VITE_PUBLIC_PATH = / @@ -14,9 +14,9 @@ VITE_PUBLIC_PATH = /
14 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]] 14 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
15 # 线上测试环境 15 # 线上测试环境
16 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]] 16 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
17 -# VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]] 17 +VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]]
18 # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]] 18 # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
19 -VITE_PROXY = [["/api","http://192.168.10.111:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]] 19 +# VITE_PROXY = [["/api","http://192.168.10.111:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]]
20 20
21 # 实时数据的ws地址 21 # 实时数据的ws地址
22 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token= 22 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
@@ -60,19 +60,31 @@ @@ -60,19 +60,31 @@
60 } 60 }
61 61
62 const getRadio = computed(() => { 62 const getRadio = computed(() => {
63 - const { radio } = props.radio;  
64 - return radio; 63 + // const { radio } = props.radio;
  64 + return props.radio;
  65 + });
  66 +
  67 + const getChardRadio = computed(() => {
  68 + const realWidth = unref(chartRef)?.getWidth();
  69 + const realHeight = unref(chartRef)?.getHeight();
  70 + const radioRecord = props.radio;
  71 + // const widht
  72 + return {
  73 + ...radioRecord,
  74 + height: realHeight || radioRecord.height,
  75 + width: realWidth || radioRecord.height,
  76 + };
65 }); 77 });
66 78
67 const beforeUpdateFn = (componentType: InstrumentComponentType) => { 79 const beforeUpdateFn = (componentType: InstrumentComponentType) => {
68 if (componentType === 'instrument-component-1') return update_instrument_1_font; 80 if (componentType === 'instrument-component-1') return update_instrument_1_font;
69 if (componentType === 'instrument-component-2') return update_instrument_2_font; 81 if (componentType === 'instrument-component-2') return update_instrument_2_font;
70 - return (_radio: number) => {}; 82 + return (_radio: RadioRecord) => {};
71 }; 83 };
72 84
73 function update() { 85 function update() {
74 const option = beforeUpdateFn(props.layout.componentType); 86 const option = beforeUpdateFn(props.layout.componentType);
75 - unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {}); 87 + unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
76 unref(chartRef)?.resize(); 88 unref(chartRef)?.resize();
77 } 89 }
78 90
@@ -97,7 +109,7 @@ @@ -97,7 +109,7 @@
97 const updateChartFont = useThrottleFn(() => { 109 const updateChartFont = useThrottleFn(() => {
98 const option = beforeUpdateFn(props.layout.componentType); 110 const option = beforeUpdateFn(props.layout.componentType);
99 setTimeout(() => { 111 setTimeout(() => {
100 - unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {}); 112 + unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
101 }); 113 });
102 }, 500); 114 }, 500);
103 115
@@ -143,7 +155,10 @@ @@ -143,7 +155,10 @@
143 <div> 155 <div>
144 <div 156 <div
145 class="text-center" 157 class="text-center"
146 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 16, max: 18 }), color: '#666' }" 158 + :style="{
  159 + fontSize: fontSize({ radioRecord: getRadio, basic: 16, max: 18 }),
  160 + color: '#666',
  161 + }"
147 > 162 >
148 {{ props.value.name }} 163 {{ props.value.name }}
149 </div> 164 </div>
@@ -157,7 +172,10 @@ @@ -157,7 +172,10 @@
157 > 172 >
158 <div 173 <div
159 class="text-xs text-center truncate p-5" 174 class="text-xs text-center truncate p-5"
160 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }), color: '#999' }" 175 + :style="{
  176 + fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }),
  177 + color: '#999',
  178 + }"
161 > 179 >
162 <span class="mr-2">更新时间:</span> 180 <span class="mr-2">更新时间:</span>
163 <span> 181 <span>
@@ -53,8 +53,9 @@ @@ -53,8 +53,9 @@
53 }); 53 });
54 54
55 const getRadio = computed(() => { 55 const getRadio = computed(() => {
56 - const { radio } = props.radio || DEFAULT_RADIO_RECORD;  
57 - return radio; 56 + // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
  57 + // return radio;
  58 + return props.radio || DEFAULT_RADIO_RECORD;
58 }); 59 });
59 60
60 let timeout: Nullable<number> = null; 61 let timeout: Nullable<number> = null;
@@ -91,7 +92,7 @@ @@ -91,7 +92,7 @@
91 :size="4" 92 :size="4"
92 :style="{ 93 :style="{
93 backgroundColor: '#585357', 94 backgroundColor: '#585357',
94 - padding: fontSize({ radio: getRadio, basic: 10 }), 95 + padding: fontSize({ radioRecord: getRadio, basic: 10 }),
95 }" 96 }"
96 > 97 >
97 <div 98 <div
@@ -100,8 +101,8 @@ @@ -100,8 +101,8 @@
100 class="digital-wrapper__int" 101 class="digital-wrapper__int"
101 :style="{ 102 :style="{
102 color: getPropsValue.fontColor, 103 color: getPropsValue.fontColor,
103 - fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),  
104 - padding: fontSize({ radio: getRadio, basic: 5 }), 104 + fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
  105 + padding: fontSize({ radioRecord: getRadio, basic: 5 }),
105 }" 106 }"
106 > 107 >
107 <div class="digital-text__int p-1 text-light-50"> {{ number }}</div> 108 <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
@@ -118,7 +119,7 @@ @@ -118,7 +119,7 @@
118 :size="4" 119 :size="4"
119 :style="{ 120 :style="{
120 backgroundColor: '#b74940', 121 backgroundColor: '#b74940',
121 - padding: fontSize({ radio: getRadio, basic: 10 }), 122 + padding: fontSize({ radioRecord: getRadio, basic: 10 }),
122 }" 123 }"
123 > 124 >
124 <div 125 <div
@@ -127,8 +128,8 @@ @@ -127,8 +128,8 @@
127 class="digital-wrapper__float" 128 class="digital-wrapper__float"
128 :style="{ 129 :style="{
129 color: getPropsValue.fontColor, 130 color: getPropsValue.fontColor,
130 - fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),  
131 - padding: fontSize({ radio: getRadio, basic: 5 }), 131 + fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
  132 + padding: fontSize({ radioRecord: getRadio, basic: 5 }),
132 }" 133 }"
133 > 134 >
134 <div class="digital-text__float p-1 text-light-50"> 135 <div class="digital-text__float p-1 text-light-50">
@@ -137,8 +138,8 @@ @@ -137,8 +138,8 @@
137 </div> 138 </div>
138 </Space> 139 </Space>
139 <div 140 <div
140 - class="px-1"  
141 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 18, max: 18 }) }" 141 + class="px-1 font-bold"
  142 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18, max: 18 }) }"
142 > 143 >
143 {{ getPropsValue.unit }} 144 {{ getPropsValue.unit }}
144 </div> 145 </div>
@@ -147,7 +148,7 @@ @@ -147,7 +148,7 @@
147 148
148 <div 149 <div
149 class="text-center truncate" 150 class="text-center truncate"
150 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }" 151 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18 }) }"
151 > 152 >
152 <span>{{ props.value.name || '电表' }}</span> 153 <span>{{ props.value.name || '电表' }}</span>
153 </div> 154 </div>
@@ -161,7 +162,10 @@ @@ -161,7 +162,10 @@
161 > 162 >
162 <div 163 <div
163 class="text-center text-xs truncate p-5" 164 class="text-center text-xs truncate p-5"
164 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }" 165 + :style="{
  166 + fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 16 }),
  167 + color: '#999',
  168 + }"
165 > 169 >
166 <span class="mr-1">更新时间:</span> 170 <span class="mr-1">更新时间:</span>
167 <span> 171 <span>
1 import { EChartsOption } from 'echarts'; 1 import { EChartsOption } from 'echarts';
2 -import { fontSize } from '../../detail/config/util'; 2 +import { fontSize, RadioRecord } from '../../detail/config/util';
3 import { Gradient, visualOptionField } from '../../detail/config/visualOptions'; 3 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
4 import { 4 import {
5 ComponentInfo, 5 ComponentInfo,
@@ -240,8 +240,8 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => { @@ -240,8 +240,8 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
240 return record.find((item) => item.key === key); 240 return record.find((item) => item.key === key);
241 }; 241 };
242 242
243 -export const update_instrument_1_font = (radio: number) => {  
244 - const basicFontSize = fontSize({ radio, basic: 16, max: 16, min: 12 }); 243 +export const update_instrument_1_font = (radioRecord: RadioRecord) => {
  244 + const basicFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 12 });
245 return { 245 return {
246 series: [ 246 series: [
247 { 247 {
@@ -256,9 +256,9 @@ export const update_instrument_1_font = (radio: number) => { @@ -256,9 +256,9 @@ export const update_instrument_1_font = (radio: number) => {
256 } as EChartsOption; 256 } as EChartsOption;
257 }; 257 };
258 258
259 -export const update_instrument_2_font = (radio: number) => {  
260 - const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });  
261 - const detailFontSize = fontSize({ radio, basic: 16, max: 16, min: 10 }); 259 +export const update_instrument_2_font = (radioRecord: RadioRecord) => {
  260 + const axisLabelFontSize = fontSize({ radioRecord, basic: 10, max: 16 });
  261 + const detailFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 10 });
262 return { 262 return {
263 series: [ 263 series: [
264 { 264 {
@@ -22,8 +22,9 @@ @@ -22,8 +22,9 @@
22 const getImagBase64 = ref(fallback); 22 const getImagBase64 = ref(fallback);
23 23
24 const getRadio = computed(() => { 24 const getRadio = computed(() => {
25 - const { radio } = props.radio || DEFAULT_RADIO_RECORD;  
26 - return radio; 25 + // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
  26 + // return radio;
  27 + return props.radio || DEFAULT_RADIO_RECORD;
27 }); 28 });
28 29
29 const getWidth = computed(() => { 30 const getWidth = computed(() => {
@@ -69,7 +70,7 @@ @@ -69,7 +70,7 @@
69 <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> --> 70 <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
70 <div 71 <div
71 class="w-full text-center truncate p-5" 72 class="w-full text-center truncate p-5"
72 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }), color: '#999' }" 73 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }"
73 > 74 >
74 <Tooltip 75 <Tooltip
75 placement="top" 76 placement="top"
@@ -47,8 +47,9 @@ @@ -47,8 +47,9 @@
47 }); 47 });
48 48
49 const getRadio = computed(() => { 49 const getRadio = computed(() => {
50 - const { radio } = props.radio;  
51 - return radio; 50 + // const { radio } = props.radio;
  51 + // return radio;
  52 + return props.radio || DEFAULT_RADIO_RECORD;
52 }); 53 });
53 </script> 54 </script>
54 55
@@ -66,8 +67,8 @@ @@ -66,8 +67,8 @@
66 prefix="iconfont" 67 prefix="iconfont"
67 :style="{ 68 :style="{
68 color: props.value.iconColor, 69 color: props.value.iconColor,
69 - width: fontSize({ radio: getRadio, basic: 50, min: 16 }),  
70 - height: fontSize({ radio: getRadio, basic: 50, min: 16 }), 70 + width: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
  71 + height: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
71 }" 72 }"
72 /> 73 />
73 </div> 74 </div>
@@ -77,12 +78,12 @@ @@ -77,12 +78,12 @@
77 class="truncate" 78 class="truncate"
78 :suffix="getShowUnit ? props.value.unit : ''" 79 :suffix="getShowUnit ? props.value.unit : ''"
79 :value-style="{ 80 :value-style="{
80 - fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }), 81 + fontSize: fontSize({ radioRecord: getRadio, basic: 24, min: 16 }),
81 color: props.value.fontColor, 82 color: props.value.fontColor,
82 }" 83 }"
83 /> 84 />
84 </div> 85 </div>
85 - <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }"> 86 + <div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
86 <!-- {{ getShowUnit ? props.value.unit : '' }} --> 87 <!-- {{ getShowUnit ? props.value.unit : '' }} -->
87 {{ props.value.name }} 88 {{ props.value.name }}
88 </div> 89 </div>
@@ -103,7 +104,7 @@ @@ -103,7 +104,7 @@
103 > 104 >
104 <div class="text-center text-xs truncate p-5" style="color: #999"> 105 <div class="text-center text-xs truncate p-5" style="color: #999">
105 <div 106 <div
106 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }) }" 107 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
107 class="truncate" 108 class="truncate"
108 > 109 >
109 <span class="mr-1">更新时间:</span> 110 <span class="mr-1">更新时间:</span>
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 :key="index" 63 :key="index"
64 > 64 >
65 <Tooltip :title="item.deviceName" placement="top"> 65 <Tooltip :title="item.deviceName" placement="top">
66 - <span> 66 + <span class="font-bold">
67 <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> --> 67 <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
68 <span>{{ item.deviceRename || item.deviceName }}</span> 68 <span>{{ item.deviceRename || item.deviceName }}</span>
69 </span> 69 </span>
@@ -40,16 +40,18 @@ export const calcScale = ( @@ -40,16 +40,18 @@ export const calcScale = (
40 }; 40 };
41 41
42 export const fontSize = ({ 42 export const fontSize = ({
43 - radio, 43 + radioRecord,
44 basic, 44 basic,
45 max, 45 max,
46 min, 46 min,
47 }: { 47 }: {
48 - radio: number; 48 + radioRecord: RadioRecord;
49 basic: number; 49 basic: number;
50 max?: number; 50 max?: number;
51 min?: number; 51 min?: number;
52 }) => { 52 }) => {
  53 + const { radio } = radioRecord;
  54 + // console.log({ ...radioRecord });
53 let res = basic * radio; 55 let res = basic * radio;
54 if (max && res > max) res = max; 56 if (max && res > max) res = max;
55 if (min && res < min) res = min; 57 if (min && res < min) res = min;
@@ -193,7 +193,7 @@ @@ -193,7 +193,7 @@
193 <ListItem> 193 <ListItem>
194 <Card class="data-card cursor-pointer"> 194 <Card class="data-card cursor-pointer">
195 <template #title> 195 <template #title>
196 - <div>{{ item.name }}</div> 196 + <div class="font-bold">{{ item.name }}</div>
197 </template> 197 </template>
198 <template #extra> 198 <template #extra>
199 <Dropdown 199 <Dropdown