fix: 看板两个设备显示名称,未显示生效

loveumiko
1 parent c6f9e680
Showing 1 changed file with 74 additions and 8 deletions
src/views/visual/packages/components/Instrument/HumidityComponent2/index.vue
--- a/src/views/visual/packages/components/Instrument/HumidityComponent2/index.vue
View file @bd9acca
+++ b/src/views/visual/packages/components/Instrument/HumidityComponent2/index.vue
View file @bd9acca
@@ -8,6 +8,7 @@
   // import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  // import { SeriesOption } from 'echarts/types/dist/shared';
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -21,6 +22,27 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
+    // const { dataSource = [] } = option || {};
+    // const {
+    //   fontColor: persetFontColor,
+    //   unit: persetUnit,
+    //   showDeviceName: persetShowDeviceName,
+    // } = persetOption || {};
+    // return {
+    //   dataSource: dataSource.map((item) => {
+    //     const { unit, fontColor, showDeviceName } = item.componentInfo || {};
+    //     const { deviceName, deviceRename, attribute } = item;
+    //     return {
+    //       unit: unit ?? persetUnit,
+    //       fontColor: fontColor ?? persetFontColor,
+    //       showDeviceName: showDeviceName ?? persetShowDeviceName,
+    //       attribute,
+    //       deviceName,
+    //       deviceRename,
+    //     };
+    //   }),
+    // };
+
     const { componentInfo, attribute, attributeRename } = option;
     const {
       fontColor: presetFontColor,
@@ -53,6 +75,7 @@
       detail: {
         valueAnimation: true,
         offsetCenter: ['0%', '-20%'],
+        // formatter: `{value} ℃`,
       },
     },
     {
@@ -64,14 +87,17 @@
       detail: {
         valueAnimation: true,
         offsetCenter: ['0%', '15%'],
+        // formatter: `{value} ℃`,
       },
     },
   ];
   const options = (): EChartsOption => {
     const { fontColor } = unref(getDesign);
+    // const { fontColor, unit } = unref(getDesign).dataSource[0] || [];
+    // console.log(fontColor, unit, 'unit', unref(getDesign));
     return {
-      color: ['#ED6C0D', '#D3DB00', '#00F0F0'],
+      color: ['#377DFF', '#FD666D', '#00F0F0'],
       series: [
         {
           type: 'gauge',
@@ -83,11 +109,11 @@
           progress: {
             show: true,
             overlap: false,
-            roundCap: true,
+            // roundCap: true,
             clip: false,
             itemStyle: {
-              // borderWidth: 1,
-              // borderColor: '#464646',
+              borderWidth: 1,
+              borderColor: '#464646',
             },
           },
           axisLine: {
@@ -144,9 +170,11 @@
   //     });
   //   }, 3000);
   // };
+
   const list = ref<any>([]);
   const updateFn: MultipleDataFetchUpdateFn = (message) => {
     const { data = {} } = message;
+
     const { dataSource } = props.config.option;
     // const dataList = Object.keys(data);
     const dataList = dataSource?.map((item) => item.attribute);
@@ -167,9 +195,14 @@
     });
     dataSource?.forEach((item, index) => {
       list.value.forEach((item1, index1) => {
+        console.log(item, 'item');
         if (index == index1) {
           // item1.value = item1.value + item.componentInfo.unit;
-          item1.name = item.attributeRename;
+          item1.name = item.componentInfo.showDeviceName
+            ? item.deviceRename
+              ? item.deviceRename
+              : item.deviceName
+            : '';
           item1.title.color = item.componentInfo.fontColor;
           item1.detail.color = item.componentInfo.fontColor;
           item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;
@@ -182,9 +215,42 @@
       color: unref(list).map((item) => item.title.color),
     } as EChartsOption);
-    // updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
+    // const { dataSource } = unref(getDesign);
+    // const series = dataSource.map((item, index) => {
+    //   const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;
+    //   const [latest] = data[attribute] || [];
+    //   const [_timespan, value] = latest || [];
+    //   return {
+    //     value,
+    //     name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
+    //     title: {
+    //       color: fontColor,
+    //       offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
+    //     },
+    //     detail: {
+    //       color: fontColor,
+    //       valueAnimation: true,
+    //       offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
+    //       formatter: `{value} ${unit ?? ''}`,
+    //     },
+    //   } as SeriesOption['data'];
+    // });
+    // const xAxisData = dataSource.map((item: any) => item.fontColor as any);
+    // console.log(series, xAxisData, 'xAxisData');
+    // unref(chartInstance)?.setOption({
+    //   series: [{ data: series, pointer: { show: false } }],
+    //   color: xAxisData as any,
+    // });
+    // updateChart(series, xAxisData);
   };
+  // const updateChart = (data: SeriesOption['data'], xAxisData) => {
+  //   unref(chartInstance)?.setOption({
+  //     series: [{ data }],
+  //     xAxis: { data: xAxisData },
+  //   });
+  // };
+
   useMultipleDataFetch(props, updateFn);
   onMounted(() => {
@@ -229,9 +295,9 @@
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
     <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
-    <div class="text-gray-500 text-xs text-center truncate">{{
+    <!-- <div class="text-gray-500 text-xs text-center truncate">{{
       getDesign.attribute || '湿度'
-    }}</div>
+    }}</div> -->
     <UpdateTime :time="time" />
   </main>
 </template>