Commit 1a372647ae312f09f7cbb7b06d820ba30dc08e38

Authored by ww
1 parent 7cc31f38

fix: data board component font weight

... ... @@ -14,9 +14,9 @@ VITE_PUBLIC_PATH = /
14 14 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
15 15 # 线上测试环境
16 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 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 21 # 实时数据的ws地址
22 22 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
... ...
... ... @@ -60,19 +60,31 @@
60 60 }
61 61
62 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 79 const beforeUpdateFn = (componentType: InstrumentComponentType) => {
68 80 if (componentType === 'instrument-component-1') return update_instrument_1_font;
69 81 if (componentType === 'instrument-component-2') return update_instrument_2_font;
70   - return (_radio: number) => {};
  82 + return (_radio: RadioRecord) => {};
71 83 };
72 84
73 85 function update() {
74 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 88 unref(chartRef)?.resize();
77 89 }
78 90
... ... @@ -97,7 +109,7 @@
97 109 const updateChartFont = useThrottleFn(() => {
98 110 const option = beforeUpdateFn(props.layout.componentType);
99 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 114 }, 500);
103 115
... ... @@ -143,7 +155,10 @@
143 155 <div>
144 156 <div
145 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 163 {{ props.value.name }}
149 164 </div>
... ... @@ -157,7 +172,10 @@
157 172 >
158 173 <div
159 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 180 <span class="mr-2">更新时间:</span>
163 181 <span>
... ...
... ... @@ -53,8 +53,9 @@
53 53 });
54 54
55 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 61 let timeout: Nullable<number> = null;
... ... @@ -91,7 +92,7 @@
91 92 :size="4"
92 93 :style="{
93 94 backgroundColor: '#585357',
94   - padding: fontSize({ radio: getRadio, basic: 10 }),
  95 + padding: fontSize({ radioRecord: getRadio, basic: 10 }),
95 96 }"
96 97 >
97 98 <div
... ... @@ -100,8 +101,8 @@
100 101 class="digital-wrapper__int"
101 102 :style="{
102 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 108 <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
... ... @@ -118,7 +119,7 @@
118 119 :size="4"
119 120 :style="{
120 121 backgroundColor: '#b74940',
121   - padding: fontSize({ radio: getRadio, basic: 10 }),
  122 + padding: fontSize({ radioRecord: getRadio, basic: 10 }),
122 123 }"
123 124 >
124 125 <div
... ... @@ -127,8 +128,8 @@
127 128 class="digital-wrapper__float"
128 129 :style="{
129 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 135 <div class="digital-text__float p-1 text-light-50">
... ... @@ -137,8 +138,8 @@
137 138 </div>
138 139 </Space>
139 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 144 {{ getPropsValue.unit }}
144 145 </div>
... ... @@ -147,7 +148,7 @@
147 148
148 149 <div
149 150 class="text-center truncate"
150   - :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
  151 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18 }) }"
151 152 >
152 153 <span>{{ props.value.name || '电表' }}</span>
153 154 </div>
... ... @@ -161,7 +162,10 @@
161 162 >
162 163 <div
163 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 170 <span class="mr-1">更新时间:</span>
167 171 <span>
... ...
1 1 import { EChartsOption } from 'echarts';
2   -import { fontSize } from '../../detail/config/util';
  2 +import { fontSize, RadioRecord } from '../../detail/config/util';
3 3 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
4 4 import {
5 5 ComponentInfo,
... ... @@ -240,8 +240,8 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
240 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 245 return {
246 246 series: [
247 247 {
... ... @@ -256,9 +256,9 @@ export const update_instrument_1_font = (radio: number) => {
256 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 262 return {
263 263 series: [
264 264 {
... ...
... ... @@ -22,8 +22,9 @@
22 22 const getImagBase64 = ref(fallback);
23 23
24 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 30 const getWidth = computed(() => {
... ... @@ -69,7 +70,7 @@
69 70 <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
70 71 <div
71 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 75 <Tooltip
75 76 placement="top"
... ...
... ... @@ -47,8 +47,9 @@
47 47 });
48 48
49 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 54 </script>
54 55
... ... @@ -66,8 +67,8 @@
66 67 prefix="iconfont"
67 68 :style="{
68 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 74 </div>
... ... @@ -77,12 +78,12 @@
77 78 class="truncate"
78 79 :suffix="getShowUnit ? props.value.unit : ''"
79 80 :value-style="{
80   - fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }),
  81 + fontSize: fontSize({ radioRecord: getRadio, basic: 24, min: 16 }),
81 82 color: props.value.fontColor,
82 83 }"
83 84 />
84 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 87 <!-- {{ getShowUnit ? props.value.unit : '' }} -->
87 88 {{ props.value.name }}
88 89 </div>
... ... @@ -103,7 +104,7 @@
103 104 >
104 105 <div class="text-center text-xs truncate p-5" style="color: #999">
105 106 <div
106   - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }) }"
  107 + :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
107 108 class="truncate"
108 109 >
109 110 <span class="mr-1">更新时间:</span>
... ...
... ... @@ -63,7 +63,7 @@
63 63 :key="index"
64 64 >
65 65 <Tooltip :title="item.deviceName" placement="top">
66   - <span>
  66 + <span class="font-bold">
67 67 <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
68 68 <span>{{ item.deviceRename || item.deviceName }}</span>
69 69 </span>
... ...
... ... @@ -40,16 +40,18 @@ export const calcScale = (
40 40 };
41 41
42 42 export const fontSize = ({
43   - radio,
  43 + radioRecord,
44 44 basic,
45 45 max,
46 46 min,
47 47 }: {
48   - radio: number;
  48 + radioRecord: RadioRecord;
49 49 basic: number;
50 50 max?: number;
51 51 min?: number;
52 52 }) => {
  53 + const { radio } = radioRecord;
  54 + // console.log({ ...radioRecord });
53 55 let res = basic * radio;
54 56 if (max && res > max) res = max;
55 57 if (min && res < min) res = min;
... ...
... ... @@ -193,7 +193,7 @@
193 193 <ListItem>
194 194 <Card class="data-card cursor-pointer">
195 195 <template #title>
196   - <div>{{ item.name }}</div>
  196 + <div class="font-bold">{{ item.name }}</div>
197 197 </template>
198 198 <template #extra>
199 199 <Dropdown
... ...