简柏林 / thingskit-front · Commits

Commit d4ff18291c76fc703a1a549c0251065c93578396

Authored by xp.Huang
2 parents 34457b02 04b6bc4d

Merge branch 'ww' into 'main' 

fix: BUG in teambition

See merge request huang/yun-teng-iot-front!303
Inline Side-by-side
Showing 19 changed files with 280 additions and 1274 deletions
src/assets/images/digital-wrapper-bg-int.png renamed from src/assets/images/digital-wrapper-bg.png

1.48 KB
  1 +<?xml version="1.0" encoding="UTF-8"?>
  2 +<svg width="18px" height="20px" viewBox="0 0 18 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  3 + <title>趋势</title>
  4 + <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  5 + <g id="看板详情" transform="translate(-749.000000, -288.000000)" fill="#9D9D9E" fill-rule="nonzero">
  6 + <g id="1" transform="translate(302.000000, 266.000000)">
  7 + <g id="趋势" transform="translate(447.000000, 21.428571)">
  8 + <path d="M1.42498406,15.6605947 C1.06725816,15.6605947 0.777264031,15.3706006 0.777264031,15.0128747 L0.777264031,10.7877471 C0.777264031,10.4300212 1.06725816,10.1400271 1.42498406,10.1400271 C1.78270995,10.1400271 2.07270408,10.4300212 2.07270408,10.7877471 L2.07270408,15.0128747 C2.07270408,15.3706006 1.78270995,15.6605947 1.42498406,15.6605947 L1.42498406,15.6605947 Z M6.34765625,15.6605947 C5.98993036,15.6605947 5.69993622,15.3706006 5.69993622,15.0128747 L5.69993622,8.88504464 C5.69993622,8.52731875 5.98993036,8.23732462 6.34765625,8.23732462 C6.70538214,8.23732462 6.99537628,8.52731875 6.99537628,8.88504464 L6.99537628,15.0128747 C6.99537628,15.3706006 6.70538214,15.6605947 6.34765625,15.6605947 Z M11.2703284,15.6605947 C10.9126026,15.6605947 10.6226084,15.3706006 10.6226084,15.0128747 L10.6226084,10.7357302 C10.6226084,10.3780043 10.9126026,10.0880102 11.2703284,10.0880102 C11.6280543,10.0880102 11.9180485,10.3780043 11.9180485,10.7357302 L11.9180485,15.0128747 C11.9180485,15.3706006 11.6280543,15.6605947 11.2703284,15.6605947 Z M16.1930006,15.6605947 C15.8352747,15.6605947 15.5452806,15.3706006 15.5452806,15.0128747 L15.5452806,7.99756856 C15.5452806,7.63984267 15.8352747,7.34984853 16.1930006,7.34984853 C16.5507265,7.34984853 16.8407207,7.63984267 16.8407207,7.99756856 L16.8407207,15.0128747 C16.8407207,15.3706006 16.5507265,15.6605947 16.1930006,15.6605947 L16.1930006,15.6605947 Z M1.42558195,7.79249068 C1.14131205,7.79273594 0.890103495,7.60760136 0.806175765,7.33600317 C0.722248035,7.06440498 0.825217689,6.76982427 1.06006856,6.60965402 L6.29563935,3.03902264 C6.53586252,2.87501724 6.85596642,2.89131996 7.07828444,3.07888233 L10.1126036,5.63907047 L15.6612723,1.15186543 C15.8543438,0.995657909 16.119732,0.963597347 16.3444479,1.06933353 C16.5691638,1.17506971 16.7136371,1.39998352 16.7163584,1.64831792 L16.7506802,4.73883929 C16.7526044,4.91060989 16.6862357,5.0761226 16.5661395,5.19894737 C16.4460434,5.32177213 16.2820632,5.39184191 16.1102918,5.39373406 L16.1033163,5.39373406 C15.7484514,5.39364664 15.4597264,5.10803197 15.4557956,4.75318878 L15.4358658,2.99936224 L10.5112006,6.98274075 C10.269667,7.17802156 9.92353022,7.17442642 9.68610491,6.97417092 L6.61910077,4.38647959 L1.78989955,7.6798868 C1.68260289,7.75331921 1.55560074,7.79257315 1.42558195,7.79249068 Z" id="形状"></path>
  9 + <path d="M16.0686384,2.30321269 L12.7309869,2.30321269 C12.373261,2.30321269 12.0832669,2.01321856 12.0832669,1.65549267 C12.0832669,1.29776677 12.373261,1.00777264 12.7309869,1.00777264 L16.0686384,1.00777264 C16.4263643,1.00777264 16.7163584,1.29776677 16.7163584,1.65549267 C16.7163584,2.01321856 16.4263643,2.30321269 16.0686384,2.30321269 L16.0686384,2.30321269 Z M17.1083785,18.0434072 L0.652901786,18.0434072 C0.295175893,18.0434072 0.0051817602,17.7534131 0.0051817602,17.3956872 C0.0051817602,17.0379613 0.295175893,16.7479672 0.652901786,16.7479672 L17.1083785,16.7479672 C17.4661044,16.7479672 17.7560985,17.0379613 17.7560985,17.3956872 C17.7560985,17.7534131 17.4661044,18.0434072 17.1083785,18.0434072 Z" id="形状"></path>
  10 + </g>
  11 + </g>
  12 + </g>
  13 + </g>
  14 +</svg>
@@ -126,15 +126,15 @@ @@ -126,15 +126,15 @@
126 <div class="flex flex-col w-full h-full min-w-3 min-h-3"> 126 <div class="flex flex-col w-full h-full min-w-3 min-h-3">
127 <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div> 127 <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
128 <div> 128 <div>
129 - <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{  
130 - props.value.name  
131 - }}</div> 129 + <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
  130 + {{ props.value.name }}
  131 + </div>
132 <div 132 <div
133 - class="text-xs text-center text-gray-400 truncate"  
134 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" 133 + class="text-xs text-center truncate p-5"
  134 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
135 > 135 >
136 <Tooltip 136 <Tooltip
137 - placement="topLeft" 137 + placement="top"
138 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" 138 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
139 > 139 >
140 <span class="mr-2">更新时间:</span> 140 <span class="mr-2">更新时间:</span>
@@ -64,6 +64,11 @@ @@ -64,6 +64,11 @@
64 changeValue.value = newValue; 64 changeValue.value = newValue;
65 }; 65 };
66 66
  67 + const getScale = computed(() => {
  68 + const { width } = props.radio || DEFAULT_RADIO_RECORD;
  69 + return width / 360 > 1 ? 1 : width / 360;
  70 + });
  71 +
67 onMounted(() => { 72 onMounted(() => {
68 if (props.random) 73 if (props.random)
69 timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number; 74 timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
@@ -79,33 +84,64 @@ @@ -79,33 +84,64 @@
79 <section class="w-full h-full"> 84 <section class="w-full h-full">
80 <div class="flex flex-col w-full h-full"> 85 <div class="flex flex-col w-full h-full">
81 <div class="flex-1 flex justify-center items-center"> 86 <div class="flex-1 flex justify-center items-center">
82 - <div class="flex flex-col">  
83 - <Space justify="end" class="justify-end" :size="getRadio * 15"> 87 + <div class="flex px-4 items-center" :style="{ transform: `scale(${getScale})` }">
  88 + <Space
  89 + justify="end"
  90 + class="justify-end"
  91 + :size="4"
  92 + :style="{
  93 + backgroundColor: '#585357',
  94 + padding: fontSize({ radio: getRadio, basic: 10 }),
  95 + }"
  96 + >
84 <div 97 <div
85 v-for="number in integerPart" 98 v-for="number in integerPart"
86 :key="number" 99 :key="number"
87 - class="border border-gray-400 p-2" 100 + class="digital-wrapper__int"
88 :style="{ 101 :style="{
89 color: getPropsValue.fontColor, 102 color: getPropsValue.fontColor,
90 - fontSize: fontSize({ radio: getRadio, basic: 20 }), 103 + fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
  104 + padding: fontSize({ radio: getRadio, basic: 5 }),
91 }" 105 }"
92 > 106 >
93 - {{ number }} 107 + <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
94 </div> 108 </div>
95 </Space> 109 </Space>
96 - <Space justify="end" class="justify-end mt-2" :size="getRadio * 15"> 110 + <div
  111 + class="m-0.5 rounded-1/2"
  112 + style="background-color: #333; width: 6px; height: 6px; align-self: flex-end"
  113 + >
  114 + </div>
  115 + <Space
  116 + justify="end"
  117 + class="justify-end"
  118 + :size="4"
  119 + :style="{
  120 + backgroundColor: '#b74940',
  121 + padding: fontSize({ radio: getRadio, basic: 10 }),
  122 + }"
  123 + >
97 <div 124 <div
98 v-for="number in decimalPart" 125 v-for="number in decimalPart"
99 :key="number" 126 :key="number"
100 - class="border border-gray-400 p-1" 127 + class="digital-wrapper__float"
101 :style="{ 128 :style="{
102 color: getPropsValue.fontColor, 129 color: getPropsValue.fontColor,
103 - fontSize: fontSize({ radio: getRadio, basic: 18 }), 130 + fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
  131 + padding: fontSize({ radio: getRadio, basic: 5 }),
104 }" 132 }"
105 > 133 >
106 - {{ number }} 134 + <div class="digital-text__float p-1 text-light-50">
  135 + {{ number }}
  136 + </div>
107 </div> 137 </div>
108 </Space> 138 </Space>
  139 + <div
  140 + class="px-1"
  141 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 18, max: 18 }) }"
  142 + >
  143 + {{ getPropsValue.unit }}
  144 + </div>
109 </div> 145 </div>
110 </div> 146 </div>
111 147
@@ -114,14 +150,13 @@ @@ -114,14 +150,13 @@
114 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }" 150 :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
115 > 151 >
116 <span>{{ props.value.name || '电表' }}</span> 152 <span>{{ props.value.name || '电表' }}</span>
117 - <span class="px-1">({{ getPropsValue.unit }})</span>  
118 </div> 153 </div>
119 <div 154 <div
120 - class="text-center mt-1 text-gray-400 text-xs truncate"  
121 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" 155 + class="text-center text-xs truncate p-5"
  156 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
122 > 157 >
123 <Tooltip 158 <Tooltip
124 - placement="topLeft" 159 + placement="top"
125 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" 160 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
126 > 161 >
127 <span class="mr-1">更新时间:</span> 162 <span class="mr-1">更新时间:</span>
@@ -134,3 +169,35 @@ @@ -134,3 +169,35 @@
134 <div></div> 169 <div></div>
135 </section> 170 </section>
136 </template> 171 </template>
  172 +
  173 +<style scoped lang="less">
  174 + .digital-wrapper__int {
  175 + border-radius: 1px;
  176 + box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
  177 + background: url('/@/assets/images/digital-wrapper-bg-int.png') 0px -1px no-repeat;
  178 + padding: 5px;
  179 + background-size: 100% 100%;
  180 + }
  181 + .digital-text_int {
  182 + display: inline-block;
  183 + overflow-wrap: break-word;
  184 + color: rgba(255, 255, 255, 1);
  185 + white-space: nowrap;
  186 + text-align: center;
  187 + }
  188 +
  189 + .digital-wrapper__float {
  190 + border-radius: 1px;
  191 + box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
  192 + background: url('/@/assets/images/digital-wrapper-bg-float.png') 0px -1px no-repeat;
  193 + padding: 5px;
  194 + background-size: 100% 100%;
  195 + }
  196 + .digital-text_float {
  197 + display: inline-block;
  198 + overflow-wrap: break-word;
  199 + color: rgba(255, 255, 255, 1);
  200 + white-space: nowrap;
  201 + text-align: center;
  202 + }
  203 +</style>
@@ -104,9 +104,9 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp @@ -104,9 +104,9 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
104 detail: { 104 detail: {
105 valueAnimation: true, 105 valueAnimation: true,
106 width: '60%', 106 width: '60%',
107 - lineHeight: 30, 107 + lineHeight: 10,
108 borderRadius: 8, 108 borderRadius: 8,
109 - offsetCenter: [0, '-15%'], 109 + offsetCenter: [0, '30%'],
110 fontSize: 14, 110 fontSize: 14,
111 fontWeight: 'bolder', 111 fontWeight: 'bolder',
112 formatter: `{value} ${unit ?? ''}`, 112 formatter: `{value} ${unit ?? ''}`,
@@ -220,6 +220,7 @@ export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOp @@ -220,6 +220,7 @@ export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOp
220 valueAnimation: true, 220 valueAnimation: true,
221 formatter: `{value} ${unit ?? ''}`, 221 formatter: `{value} ${unit ?? ''}`,
222 color: params?.fontColor || 'inherit', 222 color: params?.fontColor || 'inherit',
  223 + offsetCenter: [0, '70%'],
223 fontSize: 14, 224 fontSize: 14,
224 }, 225 },
225 data: [ 226 data: [
@@ -254,7 +255,8 @@ export const update_instrument_1_font = (radio: number) => { @@ -254,7 +255,8 @@ export const update_instrument_1_font = (radio: number) => {
254 }; 255 };
255 256
256 export const update_instrument_2_font = (radio: number) => { 257 export const update_instrument_2_font = (radio: number) => {
257 - const axisLabelFontSize = fontSize({ radio, basic: 10, max: 18 }); 258 + const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });
  259 + const detailFontSize = fontSize({ radio, basic: 12 });
258 return { 260 return {
259 series: [ 261 series: [
260 { 262 {
@@ -262,31 +264,35 @@ export const update_instrument_2_font = (radio: number) => { @@ -262,31 +264,35 @@ export const update_instrument_2_font = (radio: number) => {
262 fontSize: axisLabelFontSize, 264 fontSize: axisLabelFontSize,
263 }, 265 },
264 detail: { 266 detail: {
265 - fontSize: axisLabelFontSize, 267 + fontSize: detailFontSize,
266 }, 268 },
267 }, 269 },
268 ], 270 ],
269 } as EChartsOption; 271 } as EChartsOption;
270 }; 272 };
271 273
272 -export const update_instrument_1_value = (value) => { 274 +const handleValue = (value: any) => {
  275 + return Number(value).toFixed(2);
  276 +};
  277 +
  278 +export const update_instrument_1_value = (value: number) => {
273 return { 279 return {
274 series: [ 280 series: [
275 { 281 {
276 - data: [{ value }], 282 + data: [{ value: handleValue(value) }],
277 }, 283 },
278 { 284 {
279 - data: [{ value }], 285 + data: [{ value: handleValue(value) }],
280 }, 286 },
281 ], 287 ],
282 } as EChartsOption; 288 } as EChartsOption;
283 }; 289 };
284 290
285 -export const update_instrument_2_value = (value) => { 291 +export const update_instrument_2_value = (value: number) => {
286 return { 292 return {
287 series: [ 293 series: [
288 { 294 {
289 - data: [{ value }], 295 + data: [{ value: handleValue(value) }],
290 }, 296 },
291 ], 297 ],
292 } as EChartsOption; 298 } as EChartsOption;
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 - import { computed } from 'vue';  
3 - import { Tooltip, Image } from 'ant-design-vue'; 2 + import { computed, ref, watch } from 'vue';
  3 + import { Tooltip, Image as AntImage } from 'ant-design-vue';
4 import { 4 import {
5 DEFAULT_DATE_FORMAT, 5 DEFAULT_DATE_FORMAT,
6 DEFAULT_RADIO_RECORD, 6 DEFAULT_RADIO_RECORD,
@@ -19,6 +19,8 @@ @@ -19,6 +19,8 @@
19 const fallback = 19 const fallback =
20 'data:image/png;base64,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'; 20 'data:image/png;base64,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';
21 21
  22 + const getImagBase64 = ref(fallback);
  23 +
22 const getRadio = computed(() => { 24 const getRadio = computed(() => {
23 const { radio } = props.radio || DEFAULT_RADIO_RECORD; 25 const { radio } = props.radio || DEFAULT_RADIO_RECORD;
24 return radio; 26 return radio;
@@ -26,27 +28,56 @@ @@ -26,27 +28,56 @@
26 28
27 const getWidth = computed(() => { 29 const getWidth = computed(() => {
28 const marign = 5; 30 const marign = 5;
29 - const { width = 180 } = props.radio || {};  
30 - return width - marign; 31 + const offsetHight = 62 + (props.radio ? 62 : 0);
  32 + const { width = 240, height = 200 } = props.radio || {};
  33 + return width > height - offsetHight ? height - offsetHight - marign : width - marign;
31 }); 34 });
  35 +
  36 + watch(
  37 + () => props.value?.value,
  38 + () => {
  39 + if (props.value?.value) {
  40 + getBase64Image(props.value.value);
  41 + }
  42 + }
  43 + );
  44 +
  45 + const getBase64Image = (url: string) => {
  46 + let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');
  47 + const ctx = canvas.getContext('2d');
  48 + let image: Nullable<HTMLImageElement> = new Image();
  49 +
  50 + image.onload = function () {
  51 + canvas!.height = image!.height;
  52 + canvas!.width = image!.width;
  53 + ctx?.drawImage(image!, 0, 0);
  54 + const dataUrl = canvas!.toDataURL('image/png');
  55 + getImagBase64.value = dataUrl;
  56 + image = null;
  57 + canvas = null;
  58 + };
  59 + image.setAttribute('crossOrigin', 'Anonymous');
  60 + image.src = url;
  61 + };
32 </script> 62 </script>
33 63
34 <template> 64 <template>
35 <section 65 <section
36 class="w-full h-full flex flex-col justify-center items-center justify-between widget-picture" 66 class="w-full h-full flex flex-col justify-center items-center justify-between widget-picture"
37 > 67 >
38 - <Image :width="getWidth" :src="props?.value?.value || ''" :fallback="fallback" /> 68 + <AntImage :width="getWidth" :src="getImagBase64" :fallback="fallback" />
  69 + <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
39 <div 70 <div
40 - class="w-full text-center text-gray-400 truncate"  
41 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" 71 + class="w-full text-center truncate p-5"
  72 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
42 > 73 >
43 <Tooltip 74 <Tooltip
44 - placement="topLeft"  
45 - :title="props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT)" 75 + placement="top"
  76 + :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
46 > 77 >
47 <span>更新时间:</span> 78 <span>更新时间:</span>
48 <span class="truncate"> 79 <span class="truncate">
49 - {{ props?.value?.updateTime || dateUtil().format(DEFAULT_DATE_FORMAT) }} 80 + {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
50 </span> 81 </span>
51 </Tooltip> 82 </Tooltip>
52 </div> 83 </div>
@@ -14,5 +14,11 @@ export const transformPictureConfig = ( @@ -14,5 +14,11 @@ export const transformPictureConfig = (
14 record: DataComponentRecord, 14 record: DataComponentRecord,
15 dataSourceRecord: DataSource 15 dataSourceRecord: DataSource
16 ) => { 16 ) => {
17 - return {}; 17 + const componentInfo = dataSourceRecord.componentInfo;
  18 + return {
  19 + value: {
  20 + value: componentInfo.value,
  21 + updateTime: componentInfo.updateTime,
  22 + } as PictureComponentValue,
  23 + };
18 }; 24 };
@@ -71,30 +71,33 @@ @@ -71,30 +71,33 @@
71 }" 71 }"
72 /> 72 />
73 </div> 73 </div>
74 - <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">{{  
75 - props.value.name  
76 - }}</div> 74 + <div class="flex justify-center">
  75 + <Statistic
  76 + :value="props.value.value || 0"
  77 + class="truncate"
  78 + :value-style="{
  79 + fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }),
  80 + color: props.value.fontColor,
  81 + }"
  82 + />
  83 + </div>
  84 + <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
  85 + <!-- {{ getShowUnit ? props.value.unit : '' }} -->
  86 + {{ props.value.name }}
  87 + </div>
  88 + <!-- <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
  89 + {{ props.value.name }}
  90 + </div> -->
77 </div> 91 </div>
78 </div> 92 </div>
79 - <div class="w-1/2 flex justify-center">  
80 - <Statistic  
81 - :value="props.value.value || 0"  
82 - :suffix="getShowUnit ? props.value.unit : ''"  
83 - class="truncate"  
84 - :value-style="{  
85 - fontSize: fontSize({ radio: getRadio, basic: 16 }),  
86 - color: props.value.fontColor,  
87 - }"  
88 - />  
89 - </div>  
90 </div> 93 </div>
91 - <div v-if="getShowUpdate" class="text-center text-xs text-gray-400 truncate"> 94 + <div v-if="getShowUpdate" class="text-center text-xs truncate p-5" style="color: #999">
92 <Tooltip 95 <Tooltip
93 - placement="topLeft" 96 + placement="top"
94 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)" 97 :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
95 > 98 >
96 <div 99 <div
97 - :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }) }" 100 + :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 14 }) }"
98 class="truncate" 101 class="truncate"
99 > 102 >
100 <span class="mr-1">更新时间:</span> 103 <span class="mr-1">更新时间:</span>
@@ -64,7 +64,7 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = { @@ -64,7 +64,7 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
64 64
65 export const textComponentConfig: TextComponentDefault[] = [ 65 export const textComponentConfig: TextComponentDefault[] = [
66 TextComponent1Config, 66 TextComponent1Config,
67 - TextComponent2Config, 67 + // TextComponent2Config,
68 TextComponent3Config, 68 TextComponent3Config,
69 TextComponent4Config, 69 TextComponent4Config,
70 TextComponent5Config, 70 TextComponent5Config,
@@ -54,7 +54,7 @@ @@ -54,7 +54,7 @@
54 </script> 54 </script>
55 55
56 <template> 56 <template>
57 - <div class="flex justify-between w-full"> 57 + <div class="flex justify-between w-full p-5">
58 <div class="flex" :style="{ width: `calc(100% - 60px)` }"> 58 <div class="flex" :style="{ width: `calc(100% - 60px)` }">
59 <div 59 <div
60 v-for="(item, index) in props.record" 60 v-for="(item, index) in props.record"
@@ -62,15 +62,15 @@ @@ -62,15 +62,15 @@
62 :style="{ width: `${100 / props.record.length}%` }" 62 :style="{ width: `${100 / props.record.length}%` }"
63 :key="index" 63 :key="index"
64 > 64 >
65 - <Tooltip :title="item.deviceName" placement="topLeft"> 65 + <Tooltip :title="item.deviceName" placement="top">
66 <span> 66 <span>
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>
70 </Tooltip> 70 </Tooltip>
71 </div> 71 </div>
72 </div> 72 </div>
73 - <div class="flex items-center w-10"> 73 + <div class="flex items-center gap-5">
74 <slot name="moreAction"></slot> 74 <slot name="moreAction"></slot>
75 <Dropdown 75 <Dropdown
76 v-if="dropMenuList.length" 76 v-if="dropMenuList.length"
@@ -79,7 +79,10 @@ @@ -79,7 +79,10 @@
79 @menu-event="handleMenuEvent" 79 @menu-event="handleMenuEvent"
80 > 80 >
81 <Tooltip title="更多"> 81 <Tooltip title="更多">
82 - <MoreOutlined v-if="!getIsSharePage" class="transform rotate-90 cursor-pointer" /> 82 + <MoreOutlined
  83 + v-if="!getIsSharePage"
  84 + class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
  85 + />
83 </Tooltip> 86 </Tooltip>
84 </Dropdown> 87 </Dropdown>
85 </div> 88 </div>
1 -<!DOCTYPE html>  
2 -<html lang="en">  
3 - <head>  
4 - <meta charset="UTF-8" />  
5 - <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
6 - <title>Document</title>  
7 - <!-- <link rel="stylesheet" type="text/css" href="./common.css" />  
8 - <link rel="stylesheet" type="text/css" href="./index.css" /> -->  
9 - <style>  
10 - body * {  
11 - box-sizing: border-box;  
12 - flex-shrink: 0;  
13 - }  
14 - body {  
15 - font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial,  
16 - PingFang SC-Light, Microsoft YaHei;  
17 - }  
18 - input {  
19 - background-color: transparent;  
20 - border: 0;  
21 - }  
22 - button {  
23 - margin: 0;  
24 - padding: 0;  
25 - border: 1px solid transparent;  
26 - outline: none;  
27 - background-color: transparent;  
28 - }  
29 -  
30 - button:active {  
31 - opacity: 0.6;  
32 - }  
33 - .flex-col {  
34 - display: flex;  
35 - flex-direction: column;  
36 - }  
37 - .flex-row {  
38 - display: flex;  
39 - flex-direction: row;  
40 - }  
41 - .justify-start {  
42 - display: flex;  
43 - justify-content: flex-start;  
44 - }  
45 - .justify-center {  
46 - display: flex;  
47 - justify-content: center;  
48 - }  
49 -  
50 - .justify-end {  
51 - display: flex;  
52 - justify-content: flex-end;  
53 - }  
54 - .justify-evenly {  
55 - display: flex;  
56 - justify-content: space-evenly;  
57 - }  
58 - .justify-around {  
59 - display: flex;  
60 - justify-content: space-around;  
61 - }  
62 - .justify-between {  
63 - display: flex;  
64 - justify-content: space-between;  
65 - }  
66 - .align-start {  
67 - display: flex;  
68 - align-items: flex-start;  
69 - }  
70 - .align-center {  
71 - display: flex;  
72 - align-items: center;  
73 - }  
74 - .align-end {  
75 - display: flex;  
76 - align-items: flex-end;  
77 - }  
78 - </style>  
79 - <style>  
80 - .page {  
81 - position: relative;  
82 - width: 1920px;  
83 - height: 1080px;  
84 - overflow: hidden;  
85 - }  
86 -  
87 - .image_1 {  
88 - width: 1920px;  
89 - height: 960px;  
90 - }  
91 -  
92 - .section_1 {  
93 - height: 972px;  
94 - background-color: rgba(240, 242, 245, 1);  
95 - width: 1638px;  
96 - position: absolute;  
97 - left: 282px;  
98 - top: 108px;  
99 - }  
100 -  
101 - .box_1 {  
102 - width: 1598px;  
103 - height: 796px;  
104 - margin: 20px 0 0 20px;  
105 - }  
106 -  
107 - .box_2 {  
108 - height: 78px;  
109 - border-radius: 3px;  
110 - background-color: rgba(255, 255, 255, 1);  
111 - width: 1598px;  
112 - }  
113 -  
114 - .box_3 {  
115 - width: 208px;  
116 - height: 25px;  
117 - margin: 27px 0 0 20px;  
118 - }  
119 -  
120 - .thumbnail_1 {  
121 - width: 20px;  
122 - height: 19px;  
123 - margin-top: 4px;  
124 - }  
125 -  
126 - .text_1 {  
127 - width: 80px;  
128 - height: 25px;  
129 - display: inline-block;  
130 - overflow-wrap: break-word;  
131 - color: rgba(51, 51, 51, 1);  
132 - font-size: 18px;  
133 - font-family: PingFangSC-Semibold;  
134 - white-space: nowrap;  
135 - line-height: 25px;  
136 - text-align: left;  
137 - margin-left: 12px;  
138 - }  
139 -  
140 - .text_2 {  
141 - width: 72px;  
142 - height: 25px;  
143 - display: inline-block;  
144 - overflow-wrap: break-word;  
145 - color: rgba(255, 255, 255, 1);  
146 - font-size: 18px;  
147 - font-family: PingFangSC-Regular;  
148 - white-space: nowrap;  
149 - line-height: 25px;  
150 - text-align: left;  
151 - margin-left: 24px;  
152 - }  
153 -  
154 - .text-wrapper_1 {  
155 - width: 107px;  
156 - height: 20px;  
157 - overflow-wrap: break-word;  
158 - text-align: left;  
159 - white-space: nowrap;  
160 - margin-top: 20px;  
161 - font-size: 0;  
162 - }  
163 -  
164 - .text_3 {  
165 - font-size: 14px;  
166 - font-family: PingFangSC-Regular;  
167 - color: rgba(102, 102, 102, 1);  
168 - line-height: 20px;  
169 - }  
170 -  
171 - .text_4 {  
172 - font-size: 14px;  
173 - font-family: PingFangSC-Regular;  
174 - color: rgba(55, 125, 255, 1);  
175 - line-height: 20px;  
176 - }  
177 -  
178 - .box_4 {  
179 - width: 1597px;  
180 - height: 319px;  
181 - margin-top: 20px;  
182 - }  
183 -  
184 - .group_1 {  
185 - height: 319px;  
186 - border-radius: 3px;  
187 - background-color: rgba(255, 255, 255, 1);  
188 - width: 519px;  
189 - position: relative;  
190 - justify-content: flex-center;  
191 - }  
192 -  
193 - .group_2 {  
194 - width: 480px;  
195 - height: 22px;  
196 - margin: 20px 0 0 20px;  
197 - }  
198 -  
199 - .text_5 {  
200 - width: 116px;  
201 - height: 22px;  
202 - display: inline-block;  
203 - overflow-wrap: break-word;  
204 - color: rgba(51, 51, 51, 1);  
205 - font-size: 16px;  
206 - font-family: PingFangSC-Medium;  
207 - white-space: nowrap;  
208 - line-height: 22px;  
209 - text-align: left;  
210 - }  
211 -  
212 - .block_1 {  
213 - width: 17px;  
214 - height: 15px;  
215 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng61e21a4ecb6a4c3e09659c9ed2eef4056c7aa9553190d0490d78d97726e898df) -1px  
216 - 0px no-repeat;  
217 - background-size: 17px 16px;  
218 - margin: 3px 0 0 312px;  
219 - }  
220 -  
221 - .block_2 {  
222 - width: 4px;  
223 - height: 4px;  
224 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)  
225 - 0px 0px no-repeat;  
226 - background-size: 4px 4px;  
227 - margin: 10px 0 0 20px;  
228 - }  
229 -  
230 - .block_3 {  
231 - width: 4px;  
232 - height: 4px;  
233 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)  
234 - 0px 0px no-repeat;  
235 - background-size: 4px 4px;  
236 - margin: 10px 0 0 2px;  
237 - }  
238 -  
239 - .block_4 {  
240 - width: 4px;  
241 - height: 4px;  
242 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px  
243 - 0px no-repeat;  
244 - background-size: 4px 4px;  
245 - margin: 10px 0 0 1px;  
246 - }  
247 -  
248 - .group_3 {  
249 - width: 50px;  
250 - height: 50px;  
251 - margin: 60px 0 0 235px;  
252 - }  
253 -  
254 - .box_5 {  
255 - width: 50px;  
256 - height: 50px;  
257 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90c6d301b6ba3ed6900f8b58d1970285c1f71afde72e8b0306f787be649088ae)  
258 - 0px 0px no-repeat;  
259 - background-size: 51px 50px;  
260 - }  
261 -  
262 - .text-wrapper_2 {  
263 - width: 49px;  
264 - height: 33px;  
265 - margin: 12px 0 0 235px;  
266 - }  
267 -  
268 - .text_6 {  
269 - width: 49px;  
270 - height: 33px;  
271 - display: inline-block;  
272 - overflow-wrap: break-word;  
273 - color: rgba(51, 51, 51, 1);  
274 - font-size: 24px;  
275 - font-family: PingFangSC-Medium;  
276 - white-space: nowrap;  
277 - line-height: 33px;  
278 - text-align: center;  
279 - }  
280 -  
281 - .text-wrapper_3 {  
282 - width: 32px;  
283 - height: 22px;  
284 - margin-left: 244px;  
285 - }  
286 -  
287 - .text_7 {  
288 - width: 32px;  
289 - height: 22px;  
290 - display: inline-block;  
291 - overflow-wrap: break-word;  
292 - color: rgba(102, 102, 102, 1);  
293 - font-size: 16px;  
294 - font-family: PingFangSC-Medium;  
295 - white-space: nowrap;  
296 - line-height: 22px;  
297 - text-align: center;  
298 - }  
299 -  
300 - .text-wrapper_4 {  
301 - width: 213px;  
302 - height: 20px;  
303 - margin: 60px 0 20px 153px;  
304 - }  
305 -  
306 - .text_8 {  
307 - width: 213px;  
308 - height: 20px;  
309 - display: inline-block;  
310 - overflow-wrap: break-word;  
311 - color: rgba(153, 153, 153, 1);  
312 - font-size: 14px;  
313 - font-family: PingFangSC-Regular;  
314 - white-space: nowrap;  
315 - line-height: 20px;  
316 - text-align: left;  
317 - }  
318 -  
319 - .group_4 {  
320 - position: absolute;  
321 - left: 448px;  
322 - top: 23px;  
323 - width: 18px;  
324 - height: 18px;  
325 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng0cbcb409c7bbb5544db0b197f5910ab50a6e5df351202723fcde68db454dc5e6)  
326 - 0px 0px no-repeat;  
327 - background-size: 18px 18px;  
328 - }  
329 -  
330 - .group_5 {  
331 - height: 319px;  
332 - border-radius: 3px;  
333 - background-color: rgba(255, 255, 255, 1);  
334 - margin-left: 20px;  
335 - width: 519px;  
336 - justify-content: flex-center;  
337 - }  
338 -  
339 - .group_6 {  
340 - width: 480px;  
341 - height: 22px;  
342 - margin: 20px 0 0 20px;  
343 - }  
344 -  
345 - .text_9 {  
346 - width: 118px;  
347 - height: 22px;  
348 - display: inline-block;  
349 - overflow-wrap: break-word;  
350 - color: rgba(51, 51, 51, 1);  
351 - font-size: 16px;  
352 - font-family: PingFangSC-Medium;  
353 - white-space: nowrap;  
354 - line-height: 22px;  
355 - text-align: left;  
356 - }  
357 -  
358 - .thumbnail_2 {  
359 - width: 18px;  
360 - height: 18px;  
361 - margin: 3px 0 0 309px;  
362 - }  
363 -  
364 - .block_5 {  
365 - width: 4px;  
366 - height: 4px;  
367 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)  
368 - 0px 0px no-repeat;  
369 - background-size: 4px 4px;  
370 - margin: 10px 0 0 20px;  
371 - }  
372 -  
373 - .block_6 {  
374 - width: 4px;  
375 - height: 4px;  
376 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)  
377 - 0px 0px no-repeat;  
378 - background-size: 4px 4px;  
379 - margin: 10px 0 0 2px;  
380 - }  
381 -  
382 - .block_7 {  
383 - width: 4px;  
384 - height: 4px;  
385 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px  
386 - 0px no-repeat;  
387 - background-size: 4px 4px;  
388 - margin: 10px 0 0 1px;  
389 - }  
390 -  
391 - .image-wrapper_1 {  
392 - width: 53px;  
393 - height: 50px;  
394 - margin: 60px 0 0 233px;  
395 - }  
396 -  
397 - .image_2 {  
398 - width: 53px;  
399 - height: 50px;  
400 - }  
401 -  
402 - .text-wrapper_5 {  
403 - width: 53px;  
404 - height: 33px;  
405 - margin: 12px 0 0 233px;  
406 - }  
407 -  
408 - .text_10 {  
409 - width: 53px;  
410 - height: 33px;  
411 - display: inline-block;  
412 - overflow-wrap: break-word;  
413 - color: rgba(51, 51, 51, 1);  
414 - font-size: 24px;  
415 - font-family: PingFangSC-Medium;  
416 - white-space: nowrap;  
417 - line-height: 33px;  
418 - text-align: center;  
419 - }  
420 -  
421 - .text-wrapper_6 {  
422 - width: 66px;  
423 - height: 22px;  
424 - margin-left: 227px;  
425 - }  
426 -  
427 - .text_11 {  
428 - width: 66px;  
429 - height: 22px;  
430 - display: inline-block;  
431 - overflow-wrap: break-word;  
432 - color: rgba(102, 102, 102, 1);  
433 - font-size: 16px;  
434 - font-family: PingFangSC-Medium;  
435 - white-space: nowrap;  
436 - line-height: 22px;  
437 - text-align: center;  
438 - }  
439 -  
440 - .text-wrapper_7 {  
441 - width: 213px;  
442 - height: 20px;  
443 - margin: 60px 0 20px 153px;  
444 - }  
445 -  
446 - .text_12 {  
447 - width: 213px;  
448 - height: 20px;  
449 - display: inline-block;  
450 - overflow-wrap: break-word;  
451 - color: rgba(153, 153, 153, 1);  
452 - font-size: 14px;  
453 - font-family: PingFangSC-Regular;  
454 - white-space: nowrap;  
455 - line-height: 20px;  
456 - text-align: left;  
457 - }  
458 -  
459 - .group_7 {  
460 - height: 319px;  
461 - border-radius: 3px;  
462 - background-color: rgba(255, 255, 255, 1);  
463 - margin-left: 20px;  
464 - width: 519px;  
465 - justify-content: flex-center;  
466 - }  
467 -  
468 - .group_8 {  
469 - width: 480px;  
470 - height: 22px;  
471 - margin: 20px 0 0 20px;  
472 - }  
473 -  
474 - .text_13 {  
475 - width: 180px;  
476 - height: 22px;  
477 - display: inline-block;  
478 - overflow-wrap: break-word;  
479 - color: rgba(51, 51, 51, 1);  
480 - font-size: 16px;  
481 - font-family: PingFangSC-Medium;  
482 - white-space: nowrap;  
483 - line-height: 22px;  
484 - text-align: left;  
485 - }  
486 -  
487 - .thumbnail_3 {  
488 - width: 18px;  
489 - height: 18px;  
490 - margin: 3px 0 0 247px;  
491 - }  
492 -  
493 - .group_9 {  
494 - width: 4px;  
495 - height: 4px;  
496 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)  
497 - 0px 0px no-repeat;  
498 - background-size: 4px 4px;  
499 - margin: 10px 0 0 20px;  
500 - }  
501 -  
502 - .group_10 {  
503 - width: 4px;  
504 - height: 4px;  
505 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)  
506 - 0px 0px no-repeat;  
507 - background-size: 4px 4px;  
508 - margin: 10px 0 0 2px;  
509 - }  
510 -  
511 - .group_11 {  
512 - width: 4px;  
513 - height: 4px;  
514 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px  
515 - 0px no-repeat;  
516 - background-size: 4px 4px;  
517 - margin: 10px 0 0 1px;  
518 - }  
519 -  
520 - .group_12 {  
521 - width: 52px;  
522 - height: 50px;  
523 - margin: 60px 0 0 234px;  
524 - }  
525 -  
526 - .group_13 {  
527 - width: 52px;  
528 - height: 50px;  
529 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2a8b4bc257a393d46c08a8d61148cae372cdba88e38494116f9a9f58e70b0bfd)  
530 - 0px 0px no-repeat;  
531 - background-size: 53px 50px;  
532 - }  
533 -  
534 - .text-wrapper_8 {  
535 - width: 29px;  
536 - height: 33px;  
537 - margin: 12px 0 0 245px;  
538 - }  
539 -  
540 - .text_14 {  
541 - width: 29px;  
542 - height: 33px;  
543 - display: inline-block;  
544 - overflow-wrap: break-word;  
545 - color: rgba(51, 51, 51, 1);  
546 - font-size: 24px;  
547 - font-family: PingFangSC-Medium;  
548 - white-space: nowrap;  
549 - line-height: 33px;  
550 - text-align: center;  
551 - }  
552 -  
553 - .text-wrapper_9 {  
554 - width: 96px;  
555 - height: 22px;  
556 - margin-left: 212px;  
557 - }  
558 -  
559 - .text_15 {  
560 - width: 96px;  
561 - height: 22px;  
562 - display: inline-block;  
563 - overflow-wrap: break-word;  
564 - color: rgba(102, 102, 102, 1);  
565 - font-size: 16px;  
566 - font-family: PingFangSC-Medium;  
567 - white-space: nowrap;  
568 - line-height: 22px;  
569 - text-align: center;  
570 - }  
571 -  
572 - .text-wrapper_10 {  
573 - width: 213px;  
574 - height: 20px;  
575 - margin: 60px 0 20px 153px;  
576 - }  
577 -  
578 - .text_16 {  
579 - width: 213px;  
580 - height: 20px;  
581 - display: inline-block;  
582 - overflow-wrap: break-word;  
583 - color: rgba(153, 153, 153, 1);  
584 - font-size: 14px;  
585 - font-family: PingFangSC-Regular;  
586 - white-space: nowrap;  
587 - line-height: 20px;  
588 - text-align: left;  
589 - }  
590 -  
591 - .box_6 {  
592 - width: 1597px;  
593 - height: 319px;  
594 - margin-top: 20px;  
595 - }  
596 -  
597 - .box_7 {  
598 - height: 319px;  
599 - border-radius: 3px;  
600 - background-color: rgba(255, 255, 255, 1);  
601 - width: 1058px;  
602 - justify-content: flex-center;  
603 - }  
604 -  
605 - .group_14 {  
606 - width: 1019px;  
607 - height: 22px;  
608 - margin: 20px 0 0 20px;  
609 - }  
610 -  
611 - .text_17 {  
612 - width: 116px;  
613 - height: 22px;  
614 - display: inline-block;  
615 - overflow-wrap: break-word;  
616 - color: rgba(51, 51, 51, 1);  
617 - font-size: 16px;  
618 - font-family: PingFangSC-Medium;  
619 - white-space: nowrap;  
620 - line-height: 22px;  
621 - text-align: left;  
622 - }  
623 -  
624 - .text_18 {  
625 - width: 118px;  
626 - height: 22px;  
627 - display: inline-block;  
628 - overflow-wrap: break-word;  
629 - color: rgba(51, 51, 51, 1);  
630 - font-size: 16px;  
631 - font-family: PingFangSC-Medium;  
632 - white-space: nowrap;  
633 - line-height: 22px;  
634 - text-align: left;  
635 - margin-left: 423px;  
636 - }  
637 -  
638 - .thumbnail_4 {  
639 - width: 18px;  
640 - height: 18px;  
641 - margin: 3px 0 0 309px;  
642 - }  
643 -  
644 - .group_15 {  
645 - width: 4px;  
646 - height: 4px;  
647 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)  
648 - 0px 0px no-repeat;  
649 - background-size: 4px 4px;  
650 - margin: 10px 0 0 20px;  
651 - }  
652 -  
653 - .group_16 {  
654 - width: 4px;  
655 - height: 4px;  
656 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)  
657 - 0px 0px no-repeat;  
658 - background-size: 4px 4px;  
659 - margin: 10px 0 0 2px;  
660 - }  
661 -  
662 - .group_17 {  
663 - width: 4px;  
664 - height: 4px;  
665 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px  
666 - 0px no-repeat;  
667 - background-size: 4px 4px;  
668 - margin: 10px 0 0 1px;  
669 - }  
670 -  
671 - .group_18 {  
672 - width: 590px;  
673 - height: 95px;  
674 - margin: 60px 0 0 235px;  
675 - }  
676 -  
677 - .group_18 {  
678 - width: 590px;  
679 - height: 95px;  
680 - }  
681 -  
682 - .box_8 {  
683 - width: 50px;  
684 - height: 95px;  
685 - }  
686 -  
687 - .box_8 {  
688 - width: 50px;  
689 - height: 95px;  
690 - }  
691 -  
692 - .box_9 {  
693 - width: 50px;  
694 - height: 50px;  
695 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng90c6d301b6ba3ed6900f8b58d1970285c1f71afde72e8b0306f787be649088ae)  
696 - 0px 0px no-repeat;  
697 - background-size: 51px 50px;  
698 - }  
699 -  
700 - .text_19 {  
701 - width: 49px;  
702 - height: 33px;  
703 - display: inline-block;  
704 - overflow-wrap: break-word;  
705 - color: rgba(51, 51, 51, 1);  
706 - font-size: 24px;  
707 - font-family: PingFangSC-Medium;  
708 - white-space: nowrap;  
709 - line-height: 33px;  
710 - text-align: center;  
711 - margin-top: 12px;  
712 - }  
713 -  
714 - .box_10 {  
715 - width: 53px;  
716 - height: 95px;  
717 - }  
718 -  
719 - .box_10 {  
720 - width: 53px;  
721 - height: 95px;  
722 - }  
723 -  
724 - .image_3 {  
725 - width: 53px;  
726 - height: 50px;  
727 - }  
728 -  
729 - .text_20 {  
730 - width: 53px;  
731 - height: 33px;  
732 - display: inline-block;  
733 - overflow-wrap: break-word;  
734 - color: rgba(51, 51, 51, 1);  
735 - font-size: 24px;  
736 - font-family: PingFangSC-Medium;  
737 - white-space: nowrap;  
738 - line-height: 33px;  
739 - text-align: center;  
740 - margin-top: 12px;  
741 - }  
742 -  
743 - .text-wrapper_11 {  
744 - width: 588px;  
745 - height: 22px;  
746 - margin-left: 244px;  
747 - }  
748 -  
749 - .text_21 {  
750 - width: 32px;  
751 - height: 22px;  
752 - display: inline-block;  
753 - overflow-wrap: break-word;  
754 - color: rgba(102, 102, 102, 1);  
755 - font-size: 16px;  
756 - font-family: PingFangSC-Medium;  
757 - white-space: nowrap;  
758 - line-height: 22px;  
759 - text-align: center;  
760 - }  
761 -  
762 - .text_22 {  
763 - width: 66px;  
764 - height: 22px;  
765 - display: inline-block;  
766 - overflow-wrap: break-word;  
767 - color: rgba(102, 102, 102, 1);  
768 - font-size: 16px;  
769 - font-family: PingFangSC-Medium;  
770 - white-space: nowrap;  
771 - line-height: 22px;  
772 - text-align: center;  
773 - }  
774 -  
775 - .text-wrapper_12 {  
776 - width: 752px;  
777 - height: 20px;  
778 - margin: 60px 0 20px 153px;  
779 - }  
780 -  
781 - .text_23 {  
782 - width: 213px;  
783 - height: 20px;  
784 - display: inline-block;  
785 - overflow-wrap: break-word;  
786 - color: rgba(153, 153, 153, 1);  
787 - font-size: 14px;  
788 - font-family: PingFangSC-Regular;  
789 - white-space: nowrap;  
790 - line-height: 20px;  
791 - text-align: left;  
792 - }  
793 -  
794 - .text_24 {  
795 - width: 213px;  
796 - height: 20px;  
797 - display: inline-block;  
798 - overflow-wrap: break-word;  
799 - color: rgba(153, 153, 153, 1);  
800 - font-size: 14px;  
801 - font-family: PingFangSC-Regular;  
802 - white-space: nowrap;  
803 - line-height: 20px;  
804 - text-align: left;  
805 - }  
806 -  
807 - .box_11 {  
808 - height: 319px;  
809 - border-radius: 3px;  
810 - background-color: rgba(255, 255, 255, 1);  
811 - width: 519px;  
812 - justify-content: flex-center;  
813 - }  
814 -  
815 - .section_2 {  
816 - width: 480px;  
817 - height: 22px;  
818 - margin: 20px 0 0 20px;  
819 - }  
820 -  
821 - .text_25 {  
822 - width: 68px;  
823 - height: 22px;  
824 - display: inline-block;  
825 - overflow-wrap: break-word;  
826 - color: rgba(51, 51, 51, 1);  
827 - font-size: 16px;  
828 - font-family: PingFangSC-Medium;  
829 - white-space: nowrap;  
830 - line-height: 22px;  
831 - text-align: left;  
832 - }  
833 -  
834 - .thumbnail_5 {  
835 - width: 18px;  
836 - height: 18px;  
837 - margin: 3px 0 0 359px;  
838 - }  
839 -  
840 - .block_8 {  
841 - width: 4px;  
842 - height: 4px;  
843 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7fbe2300f4a054a715c64dbc28a72022345b6e8c29d87ba5be6e58b9222e6888)  
844 - 0px 0px no-repeat;  
845 - background-size: 4px 4px;  
846 - margin: 10px 0 0 20px;  
847 - }  
848 -  
849 - .block_9 {  
850 - width: 4px;  
851 - height: 4px;  
852 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6bbeb27f239784515cbdbc576c0480e4f9218af9c9e465da945579af452e11a3)  
853 - 0px 0px no-repeat;  
854 - background-size: 4px 4px;  
855 - margin: 10px 0 0 2px;  
856 - }  
857 -  
858 - .block_10 {  
859 - width: 4px;  
860 - height: 4px;  
861 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng788c665bd82de9347efef08b24329265e7db13cb2ec04e9b336304cb6383bab2) -1px  
862 - 0px no-repeat;  
863 - background-size: 4px 4px;  
864 - margin: 10px 0 0 1px;  
865 - }  
866 -  
867 - .section_3 {  
868 - width: 374px;  
869 - height: 67px;  
870 - margin: 58px 0 0 73px;  
871 - }  
872 -  
873 - .box_12 {  
874 - height: 67px;  
875 - background-color: rgba(88, 83, 87, 1);  
876 - width: 210px;  
877 - }  
878 -  
879 - .box_13 {  
880 - width: 186px;  
881 - height: 50px;  
882 - margin: 9px 0 0 12px;  
883 - }  
884 -  
885 - .text-wrapper_13 {  
886 - height: 50px;  
887 - border-radius: 1px;  
888 - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);  
889 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb43fd189a34f107a87016160a0bb4a06b7227a89dd0e8872666398c06e106f0)  
890 - 0px -1px no-repeat;  
891 - background-size: 35px 51px;  
892 - width: 34px;  
893 - }  
894 -  
895 - .text_26 {  
896 - width: 21px;  
897 - height: 48px;  
898 - display: inline-block;  
899 - overflow-wrap: break-word;  
900 - color: rgba(255, 255, 255, 1);  
901 - font-size: 34px;  
902 - font-family: PingFangSC-Medium;  
903 - white-space: nowrap;  
904 - line-height: 48px;  
905 - text-align: center;  
906 - margin: 1px 0 0 6px;  
907 - }  
908 -  
909 - .text-wrapper_14 {  
910 - height: 50px;  
911 - border-radius: 1px;  
912 - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);  
913 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeb43fd189a34f107a87016160a0bb4a06b7227a89dd0e8872666398c06e106f0)  
914 - 0px -1px no-repeat;  
915 - background-size: 35px 51px;  
916 - margin-left: 4px;  
917 - width: 34px;  
918 - }  
919 -  
920 - .text_27 {  
921 - width: 21px;  
922 - height: 48px;  
923 - display: inline-block;  
924 - overflow-wrap: break-word;  
925 - color: rgba(255, 255, 255, 1);  
926 - font-size: 34px;  
927 - font-family: PingFangSC-Medium;  
928 - white-space: nowrap;  
929 - line-height: 48px;  
930 - text-align: center;  
931 - margin: 1px 0 0 6px;  
932 - }  
933 -  
934 - .text-wrapper_15 {  
935 - height: 50px;  
936 - border-radius: 1px;  
937 - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);  
938 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)  
939 - 0px 0px no-repeat;  
940 - background-size: 35px 51px;  
941 - margin-left: 4px;  
942 - width: 34px;  
943 - }  
944 -  
945 - .text_28 {  
946 - width: 21px;  
947 - height: 48px;  
948 - display: inline-block;  
949 - overflow-wrap: break-word;  
950 - color: rgba(255, 255, 255, 1);  
951 - font-size: 34px;  
952 - font-family: PingFangSC-Medium;  
953 - white-space: nowrap;  
954 - line-height: 48px;  
955 - text-align: center;  
956 - margin: 1px 0 0 6px;  
957 - }  
958 -  
959 - .text-wrapper_16 {  
960 - height: 50px;  
961 - border-radius: 1px;  
962 - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);  
963 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)  
964 - 0px 0px no-repeat;  
965 - background-size: 35px 51px;  
966 - margin-left: 4px;  
967 - width: 34px;  
968 - }  
969 -  
970 - .text_29 {  
971 - width: 21px;  
972 - height: 48px;  
973 - display: inline-block;  
974 - overflow-wrap: break-word;  
975 - color: rgba(255, 255, 255, 1);  
976 - font-size: 34px;  
977 - font-family: PingFangSC-Medium;  
978 - white-space: nowrap;  
979 - line-height: 48px;  
980 - text-align: center;  
981 - margin: 1px 0 0 6px;  
982 - }  
983 -  
984 - .text-wrapper_17 {  
985 - height: 50px;  
986 - border-radius: 1px;  
987 - box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);  
988 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2d347ae288939c4a28ddfa3b9f27c8fc682791a470f3b2106c28f1bdb6ab4ace)  
989 - 0px 0px no-repeat;  
990 - background-size: 35px 51px;  
991 - margin-left: 4px;  
992 - width: 34px;  
993 - }  
994 -  
995 - .text_30 {  
996 - width: 21px;  
997 - height: 48px;  
998 - display: inline-block;  
999 - overflow-wrap: break-word;  
1000 - color: rgba(255, 255, 255, 1);  
1001 - font-size: 34px;  
1002 - font-family: PingFangSC-Medium;  
1003 - white-space: nowrap;  
1004 - line-height: 48px;  
1005 - text-align: center;  
1006 - margin: 1px 0 0 6px;  
1007 - }  
1008 -  
1009 - .box_14 {  
1010 - width: 6px;  
1011 - height: 6px;  
1012 - background-color: rgba(51, 51, 51, 1);  
1013 - border-radius: 50%;  
1014 - margin: 60px 0 0 2px;  
1015 - }  
1016 -  
1017 - .box_15 {  
1018 - height: 67px;  
1019 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng82651a6dc918e308532b3fe2dc1839fae8d05c8efa7578d83cb239444ce9f549)  
1020 - 0px 0px no-repeat;  
1021 - background-size: 97px 67px;  
1022 - margin-left: 2px;  
1023 - width: 96px;  
1024 - }  
1025 -  
1026 - .box_16 {  
1027 - width: 72px;  
1028 - height: 50px;  
1029 - margin: 9px 0 0 12px;  
1030 - }  
1031 -  
1032 - .text-wrapper_18 {  
1033 - height: 50px;  
1034 - border-radius: 1px;  
1035 - box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);  
1036 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng245035e9da82a72a23044b1c0c3b0bbb68a44b2232ab4d286959d67553e1f40c)  
1037 - 0px -1px no-repeat;  
1038 - background-size: 35px 51px;  
1039 - width: 34px;  
1040 - }  
1041 -  
1042 - .text_31 {  
1043 - width: 21px;  
1044 - height: 48px;  
1045 - display: inline-block;  
1046 - overflow-wrap: break-word;  
1047 - color: rgba(255, 255, 255, 1);  
1048 - font-size: 34px;  
1049 - font-family: PingFangSC-Medium;  
1050 - white-space: nowrap;  
1051 - line-height: 48px;  
1052 - text-align: center;  
1053 - margin: 1px 0 0 6px;  
1054 - }  
1055 -  
1056 - .text-wrapper_19 {  
1057 - height: 50px;  
1058 - border-radius: 1px;  
1059 - box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);  
1060 - background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng245035e9da82a72a23044b1c0c3b0bbb68a44b2232ab4d286959d67553e1f40c)  
1061 - 0px -1px no-repeat;  
1062 - background-size: 35px 51px;  
1063 - width: 34px;  
1064 - }  
1065 -  
1066 - .text_32 {  
1067 - width: 21px;  
1068 - height: 48px;  
1069 - display: inline-block;  
1070 - overflow-wrap: break-word;  
1071 - color: rgba(255, 255, 255, 1);  
1072 - font-size: 34px;  
1073 - font-family: PingFangSC-Medium;  
1074 - white-space: nowrap;  
1075 - line-height: 48px;  
1076 - text-align: center;  
1077 - margin: 1px 0 0 6px;  
1078 - }  
1079 -  
1080 - .text_33 {  
1081 - width: 50px;  
1082 - height: 37px;  
1083 - display: inline-block;  
1084 - overflow-wrap: break-word;  
1085 - color: rgba(51, 51, 51, 1);  
1086 - font-size: 26px;  
1087 - font-family: PingFangSC-Medium;  
1088 - white-space: nowrap;  
1089 - line-height: 37px;  
1090 - text-align: center;  
1091 - margin: 15px 0 0 8px;  
1092 - }  
1093 -  
1094 - .text-wrapper_20 {  
1095 - width: 32px;  
1096 - height: 22px;  
1097 - margin: 30px 0 0 244px;  
1098 - }  
1099 -  
1100 - .text_34 {  
1101 - width: 32px;  
1102 - height: 22px;  
1103 - display: inline-block;  
1104 - overflow-wrap: break-word;  
1105 - color: rgba(102, 102, 102, 1);  
1106 - font-size: 16px;  
1107 - font-family: PingFangSC-Medium;  
1108 - white-space: nowrap;  
1109 - line-height: 22px;  
1110 - text-align: center;  
1111 - }  
1112 -  
1113 - .text-wrapper_21 {  
1114 - width: 213px;  
1115 - height: 20px;  
1116 - margin: 60px 0 20px 153px;  
1117 - }  
1118 -  
1119 - .text_35 {  
1120 - width: 213px;  
1121 - height: 20px;  
1122 - display: inline-block;  
1123 - overflow-wrap: break-word;  
1124 - color: rgba(153, 153, 153, 1);  
1125 - font-size: 14px;  
1126 - font-family: PingFangSC-Regular;  
1127 - white-space: nowrap;  
1128 - line-height: 20px;  
1129 - text-align: left;  
1130 - }  
1131 -  
1132 - .section_4 {  
1133 - position: absolute;  
1134 - left: 0;  
1135 - top: 875px;  
1136 - width: 282px;  
1137 - height: 205px;  
1138 - background-color: rgba(255, 255, 255, 1);  
1139 - }  
1140 - </style>  
1141 - </head>  
1142 - <body>  
1143 - <div class="section_3 flex-row">  
1144 - <div class="box_12 flex-col">  
1145 - <div class="box_13 flex-row justify-between">  
1146 - <div class="text-wrapper_13 flex-col">  
1147 - <span class="text_26">0</span>  
1148 - </div>  
1149 - <div class="text-wrapper_14 flex-col">  
1150 - <span class="text_27">0</span>  
1151 - </div>  
1152 - <div class="text-wrapper_15 flex-col">  
1153 - <span class="text_28">2</span>  
1154 - </div>  
1155 - <div class="text-wrapper_16 flex-col">  
1156 - <span class="text_29">6</span>  
1157 - </div>  
1158 - <div class="text-wrapper_17 flex-col">  
1159 - <span class="text_30">3</span>  
1160 - </div>  
1161 - </div>  
1162 - </div>  
1163 - <div class="box_14 flex-col"></div>  
1164 - <div class="box_15 flex-col">  
1165 - <div class="box_16 flex-row justify-between">  
1166 - <div class="text-wrapper_18 flex-col">  
1167 - <span class="text_31">0</span>  
1168 - </div>  
1169 - <div class="text-wrapper_19 flex-col">  
1170 - <span class="text_32">5</span>  
1171 - </div>  
1172 - </div>  
1173 - </div>  
1174 - <span class="text_33">kwh</span>  
1175 - </div>  
1176 - </body>  
1177 -</html>  
@@ -59,6 +59,9 @@ @@ -59,6 +59,9 @@
59 flex-direction: column; 59 flex-direction: column;
60 width: 100%; 60 width: 100%;
61 height: 100%; 61 height: 100%;
  62 + background-color: #fff;
  63 + border-radius: 3px;
  64 + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
62 } 65 }
63 .widget-content { 66 .widget-content {
64 display: flex; 67 display: flex;
@@ -20,10 +20,10 @@ @@ -20,10 +20,10 @@
20 20
21 <template> 21 <template>
22 <Card 22 <Card
23 - :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#dcdfe6' }" 23 + :style="{ borderColor: props.controlId === props.checkedId ? '#3079FF' : '#fff' }"
24 hoverable 24 hoverable
25 bordered 25 bordered
26 - class="w-60 h-60 widget-select !bg-light-50 cursor-pointer" 26 + class="w-60 h-60 border-2 widget-select !bg-light-50 cursor-pointer"
27 @click="handleClick" 27 @click="handleClick"
28 > 28 >
29 <div class="widget-container"> 29 <div class="widget-container">
@@ -36,6 +36,10 @@ @@ -36,6 +36,10 @@
36 </template> 36 </template>
37 37
38 <style scoped> 38 <style scoped>
  39 + .widget-select {
  40 + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
  41 + border-width: 2px;
  42 + }
39 .widget-select:deep(.ant-card-body) { 43 .widget-select:deep(.ant-card-body) {
40 /* height: 240px; */ 44 /* height: 240px; */
41 width: 240px; 45 width: 240px;
@@ -48,7 +52,7 @@ @@ -48,7 +52,7 @@
48 } 52 }
49 53
50 .widget-select:deep(.ant-card-meta) { 54 .widget-select:deep(.ant-card-meta) {
51 - border-top: 1px solid #dcdfe6; 55 + border-top: 1px solid #f0f0f0;
52 width: 100%; 56 width: 100%;
53 height: 40px; 57 height: 40px;
54 text-align: center; 58 text-align: center;
@@ -8,8 +8,8 @@ export interface RadioRecord { @@ -8,8 +8,8 @@ export interface RadioRecord {
8 export const DEFAULT_ANIMATION_INTERVAL = 2000; 8 export const DEFAULT_ANIMATION_INTERVAL = 2000;
9 9
10 export const DEFAULT_RADIO_RECORD: RadioRecord = { 10 export const DEFAULT_RADIO_RECORD: RadioRecord = {
11 - width: 300,  
12 - height: 300, 11 + width: 200,
  12 + height: 140,
13 isLess: false, 13 isLess: false,
14 radio: 1, 14 radio: 1,
15 }; 15 };
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue'; 2 import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
3 - import { LineChartOutlined, RollbackOutlined } from '@ant-design/icons-vue';  
4 import { GridItem, GridLayout } from 'vue3-grid-layout'; 3 import { GridItem, GridLayout } from 'vue3-grid-layout';
5 import { nextTick, onMounted, ref } from 'vue'; 4 import { nextTick, onMounted, ref } from 'vue';
6 import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue'; 5 import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
@@ -39,6 +38,8 @@ @@ -39,6 +38,8 @@
39 import { useSocketConnect } from '../hook/useSocketConnect'; 38 import { useSocketConnect } from '../hook/useSocketConnect';
40 import { buildUUID } from '/@/utils/uuid'; 39 import { buildUUID } from '/@/utils/uuid';
41 import HistoryTrendModal from './components/HistoryTrendModal.vue'; 40 import HistoryTrendModal from './components/HistoryTrendModal.vue';
  41 + import trendIcon from '/@/assets/svg/trend.svg';
  42 + import backIcon from '/@/assets/images/back.png';
42 43
43 const ROUTE = useRoute(); 44 const ROUTE = useRoute();
44 45
@@ -71,7 +72,7 @@ @@ -71,7 +72,7 @@
71 const resizable = ref(!unref(getIsSharePage)); 72 const resizable = ref(!unref(getIsSharePage));
72 73
73 const GirdLayoutColNum = 24; 74 const GirdLayoutColNum = 24;
74 - const GridLayoutMargin = 10; 75 + const GridLayoutMargin = 20;
75 76
76 const handleBack = () => { 77 const handleBack = () => {
77 if (unref(getIsSharePage)) return; 78 if (unref(getIsSharePage)) return;
@@ -227,7 +228,7 @@ @@ -227,7 +228,7 @@
227 const loading = ref(false); 228 const loading = ref(false);
228 const getDataBoardComponent = async () => { 229 const getDataBoardComponent = async () => {
229 try { 230 try {
230 - // dataBoardList.value = []; 231 + dataBoardList.value = [];
231 loading.value = true; 232 loading.value = true;
232 const data = await getDataBoradDetail(); 233 const data = await getDataBoradDetail();
233 234
@@ -326,6 +327,10 @@ @@ -326,6 +327,10 @@
326 327
327 layoutInfo.push({ 328 layoutInfo.push({
328 id: _id, 329 id: _id,
  330 + // x: (unref(layoutInfo).length * 2) % (GirdLayoutColNum || 24),
  331 + // y: unref(layoutInfo).length + (GirdLayoutColNum || 24),
  332 + // w: record?.w || DEFAULT_WIDGET_WIDTH,
  333 + // h: record?.h || DEFAULT_WIDGET_HEIGHT,
329 h: record?.h, 334 h: record?.h,
330 w: record?.w, 335 w: record?.w,
331 x: record?.x, 336 x: record?.x,
@@ -347,7 +352,6 @@ @@ -347,7 +352,6 @@
347 if (!dataBoardId) return; 352 if (!dataBoardId) return;
348 await deleteDataComponent({ dataBoardId, ids: [id] }); 353 await deleteDataComponent({ dataBoardId, ids: [id] });
349 createMessage.success('删除成功'); 354 createMessage.success('删除成功');
350 - await handleSaveLayoutInfo();  
351 await getDataBoardComponent(); 355 await getDataBoardComponent();
352 } catch (error) { 356 } catch (error) {
353 // createMessage.error('删除失败'); 357 // createMessage.error('删除失败');
@@ -366,12 +370,17 @@ @@ -366,12 +370,17 @@
366 </script> 370 </script>
367 371
368 <template> 372 <template>
369 - <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full"> 373 + <section class="flex flex-col overflow-hidden h-full w-full board-detail">
370 <PageHeader> 374 <PageHeader>
371 <template #title> 375 <template #title>
372 <div class="flex items-center"> 376 <div class="flex items-center">
373 - <RollbackOutlined v-if="!getIsSharePage" class="mr-3" @click="handleBack" />  
374 - <span>{{ getDataBoardName }}</span> 377 + <img
  378 + :src="backIcon"
  379 + v-if="!getIsSharePage"
  380 + class="mr-3 cursor-pointer"
  381 + @click="handleBack"
  382 + />
  383 + <span class="text-lg" color="#333">{{ getDataBoardName }}</span>
375 </div> 384 </div>
376 </template> 385 </template>
377 <template #extra> 386 <template #extra>
@@ -382,7 +391,7 @@ @@ -382,7 +391,7 @@
382 </Authority> 391 </Authority>
383 </template> 392 </template>
384 <div> 393 <div>
385 - <span class="mr-3 text-gray-400">已创建组件:</span> 394 + <span class="mr-3 text-sm" style="color: #666">已创建组件:</span>
386 <span style="color: #409eff"> {{ dataBoardList.length }}个</span> 395 <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
387 </div> 396 </div>
388 </PageHeader> 397 </PageHeader>
@@ -429,10 +438,16 @@ @@ -429,10 +438,16 @@
429 > 438 >
430 <template #moreAction> 439 <template #moreAction>
431 <Tooltip title="趋势"> 440 <Tooltip title="趋势">
432 - <LineChartOutlined 441 + <!-- <LineChartOutlined
433 v-if="!getIsSharePage" 442 v-if="!getIsSharePage"
434 class="cursor-pointer mx-1" 443 class="cursor-pointer mx-1"
435 @click="handleOpenHistroyDataModal(item.record.dataSource)" 444 @click="handleOpenHistroyDataModal(item.record.dataSource)"
  445 + /> -->
  446 + <img
  447 + :src="trendIcon"
  448 + v-if="!getIsSharePage"
  449 + class="cursor-pointer w-4.5 h-4.5"
  450 + @click="handleOpenHistroyDataModal(item.record.dataSource)"
436 /> 451 />
437 </Tooltip> 452 </Tooltip>
438 </template> 453 </template>
@@ -464,10 +479,11 @@ @@ -464,10 +479,11 @@
464 </section> 479 </section>
465 </template> 480 </template>
466 481
467 -<style> 482 +<style lang="less" scoped>
468 .vue-grid-item:not(.vue-grid-placeholder) { 483 .vue-grid-item:not(.vue-grid-placeholder) {
469 - background: #fcfcfc;  
470 - border: 1px solid black; 484 + background: #fff;
  485 + border: none !important;
  486 + /* border: 1px solid black; */
471 } 487 }
472 .vue-grid-item .resizing { 488 .vue-grid-item .resizing {
473 opacity: 0.9; 489 opacity: 0.9;
@@ -513,15 +529,35 @@ @@ -513,15 +529,35 @@
513 cursor: pointer; 529 cursor: pointer;
514 } 530 }
515 531
516 - .container {  
517 - display: grid;  
518 - grid-template-columns: 3;  
519 - grid-row: 3;  
520 - } 532 + // .container {
  533 + // display: grid;
  534 + // grid-template-columns: 3;
  535 + // grid-row: 3;
  536 + // }
521 537
522 .grid-item-layout { 538 .grid-item-layout {
523 overflow: hidden; 539 overflow: hidden;
524 border: 1px solid #eee !important; 540 border: 1px solid #eee !important;
525 background-color: #fcfcfc !important; 541 background-color: #fcfcfc !important;
526 } 542 }
  543 +
  544 + .board-detail:deep(.ant-page-header) {
  545 + padding: 20px 20px 0 20px;
  546 + }
  547 +
  548 + .board-detail:deep(.ant-page-header-heading) {
  549 + height: 78px;
  550 + padding: 0 20px 0 20px;
  551 + box-sizing: border-box;
  552 + background-color: #fff;
  553 + }
  554 +
  555 + .board-detail:deep(.ant-page-header-heading-extra) {
  556 + margin: 0;
  557 + line-height: 78px;
  558 + }
  559 +
  560 + .board-detail:deep(.ant-page-header-content) {
  561 + padding-top: 20px;
  562 + }
527 </style> 563 </style>
@@ -3,6 +3,7 @@ import { Ref, unref } from 'vue'; @@ -3,6 +3,7 @@ import { Ref, unref } from 'vue';
3 import { DataBoardLayoutInfo } from '../types/type'; 3 import { DataBoardLayoutInfo } from '../types/type';
4 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum'; 4 import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
5 import { getAuthCache } from '/@/utils/auth'; 5 import { getAuthCache } from '/@/utils/auth';
  6 +import { isNullAndUnDef } from '/@/utils/is';
6 7
7 interface SocketMessage { 8 interface SocketMessage {
8 tsSubCmds: SocketMessageItem[]; 9 tsSubCmds: SocketMessageItem[];
@@ -74,10 +75,9 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) { @@ -74,10 +75,9 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
74 }, 75 },
75 onMessage(_ws, message) { 76 onMessage(_ws, message) {
76 try { 77 try {
77 - // console.log({ dataSource: unref(dataSourceRef), cmdIdMapping });  
78 const res: ResponseMessage = JSON.parse(message.data); 78 const res: ResponseMessage = JSON.parse(message.data);
79 const { subscriptionId, data = {} } = res; 79 const { subscriptionId, data = {} } = res;
80 - if (!subscriptionId) return; 80 + if (isNullAndUnDef(subscriptionId)) return;
81 const mappingRecord = cmdIdMapping.get(subscriptionId); 81 const mappingRecord = cmdIdMapping.get(subscriptionId);
82 if (!mappingRecord) return; 82 if (!mappingRecord) return;
83 const { attribute, recordIndex, dataSourceIndex } = mappingRecord; 83 const { attribute, recordIndex, dataSourceIndex } = mappingRecord;
@@ -132,17 +132,20 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) { @@ -132,17 +132,20 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
132 }; 132 };
133 133
134 const beginSendMessage = () => { 134 const beginSendMessage = () => {
135 - // close(); 135 + close();
136 cmdIdMapping.clear(); 136 cmdIdMapping.clear();
137 137
138 - // open();  
139 - const messageList = transformSocketMessageItem(); 138 + // TODO current need use setTimeout delay 1 second to reconnect
  139 + setTimeout(() => {
  140 + open();
  141 + const messageList = transformSocketMessageItem();
140 142
141 - if (unref(status) !== 'OPEN') {  
142 - waitSendQueue.push(JSON.stringify(messageList));  
143 - return;  
144 - }  
145 - send(JSON.stringify(messageList)); 143 + if (unref(status) !== 'OPEN') {
  144 + waitSendQueue.push(JSON.stringify(messageList));
  145 + return;
  146 + }
  147 + send(JSON.stringify(messageList));
  148 + }, 1000);
146 }; 149 };
147 150
148 return { 151 return {
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 const dataBoardList = ref<DataBoardRecord[]>([]); 30 const dataBoardList = ref<DataBoardRecord[]>([]);
31 //分页相关 31 //分页相关
32 const page = ref(1); 32 const page = ref(1);
33 - const pageSize = ref(36); 33 + const pageSize = ref(10);
34 const total = ref(0); 34 const total = ref(0);
35 const paginationProp = ref({ 35 const paginationProp = ref({
36 showSizeChanger: false, 36 showSizeChanger: false,
@@ -46,9 +46,11 @@ @@ -46,9 +46,11 @@
46 function pageChange(p, pz) { 46 function pageChange(p, pz) {
47 page.value = p; 47 page.value = p;
48 pageSize.value = pz; 48 pageSize.value = pz;
  49 + getDatasource();
49 } 50 }
50 function pageSizeChange(_current, size) { 51 function pageSizeChange(_current, size) {
51 pageSize.value = size; 52 pageSize.value = size;
  53 + getDatasource();
52 } 54 }
53 55
54 const createShareUrl = (boardId: string, tenantId: string, name: string) => { 56 const createShareUrl = (boardId: string, tenantId: string, name: string) => {
@@ -147,9 +149,14 @@ @@ -147,9 +149,14 @@
147 const listContainerHeight = 149 const listContainerHeight =
148 clientHeight - rect.top - paginationHeight - listContainerMarginBottom; 150 clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
149 const listContainerEl = (unref(listEL).$el as HTMLElement).querySelector( 151 const listContainerEl = (unref(listEL).$el as HTMLElement).querySelector(
150 - '.ant-spin-nested-loading' 152 + '.ant-spin-container'
151 ) as HTMLElement; 153 ) as HTMLElement;
152 - listContainerEl && (listContainerEl.style.minHeight = listContainerHeight + 'px'); 154 + listContainerEl &&
  155 + // (listContainerEl.style.minHeight = listContainerHeight + 'px') &&
  156 + // (listContainerEl.style.maxHeight = listContainerHeight + 'px') &&
  157 + (listContainerEl.style.height = listContainerHeight + 'px') &&
  158 + (listContainerEl.style.overflowY = 'auto') &&
  159 + (listContainerEl.style.overflowX = 'hidden');
153 }; 160 };
154 161
155 onMounted(() => { 162 onMounted(() => {