Merge branch 'ww' into 'main'

fix: Bug in teambition

See merge request huang/yun-teng-iot-front!310

-import { RadioRecord } from '/@/views/data/board/detail/config/util';
+import { RadioRecord } from '../../../views/visual/board/detail/config/util';
 
 export interface AddDataBoardParams {
   name: string;

@@ -49,6 +49,10 @@ export const useRedo = (_router?: Router) => {
         params['_redirect_type'] = 'path';
         params['path'] = fullPath;
       }
+      // TODO DEFECT-687 teambition
+      if (fullPath.includes('/visual/board/detail/')) {
+        params['path'] = fullPath;
+      }
       push({ name: REDIRECT_NAME, params, query }).then(() => resolve(true));
     });
   }

@@ -6,7 +6,7 @@ import {
   EXCEPTION_COMPONENT,
   PAGE_NOT_FOUND_NAME,
 } from '/@/router/constant';
-import { DATA_BOARD_SHARE_URL } from '/@/views/data/board/config/config';
+import { DATA_BOARD_SHARE_URL } from '../../views/visual/board/config/config';
 
 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
@@ -81,7 +81,7 @@ export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
 export const DATA_BOARD_SHARE: AppRouteRecordRaw = {
   path: DATA_BOARD_SHARE_URL(),
   name: 'dataBoardSharePage',
-  component: () => import('/@/views/data/board/detail/index.vue'),
+  component: () => import('/@/views/visual/board/detail/index.vue'),
   meta: {
     ignoreAuth: true,
     title: '分享看板',

@@ -14,7 +14,7 @@
   Reflect.deleteProperty(params, 'path');
 
   const _path = Array.isArray(path) ? path.join('/') : path;
-
+  console.log(unref(currentRoute));
   if (_redirect_type === 'name') {
     replace({
       name: _path,

@@ -79,15 +79,20 @@
   const getUpdateValueFn = (componentType: InstrumentComponentType) => {
     if (componentType === 'instrument-component-1') return update_instrument_1_value;
     if (componentType === 'instrument-component-2') return update_instrument_2_value;
-    return (_radio: number) => {};
+    return (_radio: DashBoardValue) => {};
   };
 
-  const updateChartValue = useThrottleFn((newValue) => {
+  const updateChartValue = useThrottleFn(() => {
     const updateFn = getUpdateValueFn(props.layout.componentType);
-    unref(chartRef)?.setOption((updateFn(newValue || 0) as unknown as EChartsOption) || {});
+    unref(chartRef)?.setOption((updateFn(props.value) as unknown as EChartsOption) || {});
   }, 500);
 
-  watch(() => props.value.value, updateChartValue);
+  watch(() => props.value, updateChartValue);
+
+  // watch(
+  //   () => [props.value.gradientInfo, props.value.unit, props.value.valueColor, props.value.name],
+  //   updateChartValue
+  // );
 
   const updateChartFont = useThrottleFn(() => {
     const option = beforeUpdateFn(props.layout.componentType);
@@ -110,7 +115,9 @@
   function handleRandomValue() {
     const newValue = Math.floor(Math.random() * 100);
     const updateFn = getUpdateValueFn(props.layout.componentType);
-    unref(chartRef)?.setOption((updateFn(newValue) as unknown as EChartsOption) || {});
+    unref(chartRef)?.setOption(
+      (updateFn({ ...props.value, value: newValue }) as unknown as EChartsOption) || {}
+    );
   }
 
   onMounted(() => {
@@ -135,20 +142,20 @@
       <div class="text-center" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
         {{ props.value.name }}
       </div>
-      <div
-        class="text-xs text-center truncate p-5"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
+      <Tooltip
+        placement="top"
+        :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
       >
-        <Tooltip
-          placement="top"
-          :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
+        <div
+          class="text-xs text-center truncate p-5"
+          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
         >
           <span class="mr-2">更新时间:</span>
           <span>
             {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
           </span>
-        </Tooltip>
-      </div>
+        </div>
+      </Tooltip>
     </div>
   </div>
 </template>

@@ -151,20 +151,20 @@
       >
         <span>{{ props.value.name || '电表' }}</span>
       </div>
-      <div
-        class="text-center text-xs truncate p-5"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
+      <Tooltip
+        placement="top"
+        :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
       >
-        <Tooltip
-          placement="top"
-          :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
+        <div
+          class="text-center text-xs truncate p-5"
+          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
         >
           <span class="mr-1">更新时间:</span>
           <span>
             {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
           </span>
-        </Tooltip>
-      </div>
+        </div>
+      </Tooltip>
     </div>
     <div></div>
   </section>

@@ -32,7 +32,7 @@ export interface DashBoardValue {
   name?: string;
   updateTime?: string;
   value?: number;
-  valueColor?: string;
+  fontColor?: string;
   gradientInfo?: GradientInfoRecord[];
 }
 
@@ -53,6 +53,7 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
     series: [
       {
         type: 'gauge',
+        radius: '50%',
         center: ['50%', '60%'],
         startAngle: 200,
         endAngle: -20,
@@ -83,15 +84,15 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
           },
         },
         splitLine: {
-          distance: -45,
-          length: 14,
+          distance: -40,
+          length: 10,
           lineStyle: {
             width: 3,
             color: '#999',
           },
         },
         axisLabel: {
-          distance: -5,
+          distance: 0,
           color: '#999',
           // fontSize: 20,
         },
@@ -120,6 +121,7 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
       },
       {
         type: 'gauge',
+        radius: '50%',
         center: ['50%', '60%'],
         startAngle: 200,
         endAngle: -20,
@@ -239,7 +241,7 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
 };
 
 export const update_instrument_1_font = (radio: number) => {
-  const basicFontSize = fontSize({ radio, basic: 20, max: 25, min: 12 });
+  const basicFontSize = fontSize({ radio, basic: 16, max: 16, min: 12 });
   return {
     series: [
       {
@@ -256,7 +258,7 @@ export const update_instrument_1_font = (radio: number) => {
 
 export const update_instrument_2_font = (radio: number) => {
   const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });
-  const detailFontSize = fontSize({ radio, basic: 20, max: 25, min: 12 });
+  const detailFontSize = fontSize({ radio, basic: 16, max: 16, min: 10 });
   return {
     series: [
       {
@@ -275,11 +277,16 @@ const handleValue = (value: any) => {
   return Number(value).toFixed(2);
 };
 
-export const update_instrument_1_value = (value: number) => {
+export const update_instrument_1_value = (params: DashBoardValue) => {
+  const { value = 0, unit = '°C', fontColor } = params;
   return {
     series: [
       {
         data: [{ value: handleValue(value) }],
+        detail: {
+          formatter: `{value} ${unit ?? ''}`,
+          color: fontColor || 'inherit',
+        },
       },
       {
         data: [{ value: handleValue(value) }],
@@ -288,11 +295,35 @@ export const update_instrument_1_value = (value: number) => {
   } as EChartsOption;
 };
 
-export const update_instrument_2_value = (value: number) => {
+export const update_instrument_2_value = (params: DashBoardValue) => {
+  const { value = 0, unit = 'km/h', fontColor, gradientInfo } = params;
+  const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
+  const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
+  const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
+
+  let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 70;
+  max = Number(1 + Array(String(max).length).fill(0).join(''));
+
+  const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
+  const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
   return {
     series: [
       {
         data: [{ value: handleValue(value) }],
+        detail: {
+          formatter: `{value} ${unit ?? ''}`,
+          color: fontColor || 'inherit',
+        },
+        axisLine: {
+          lineStyle: {
+            width: 20,
+            color: [
+              [firstGradient, firstRecord?.color || GradientColor.FIRST],
+              [secondGradient, secondRecord?.color || GradientColor.SECOND],
+              [1, thirdRecord?.color || GradientColor.THIRD],
+            ],
+          },
+        },
       },
     ],
   } as EChartsOption;

@@ -91,11 +91,12 @@
         </div>
       </div>
     </div>
-    <div v-if="getShowUpdate" class="text-center text-xs truncate p-5" style="color: #999">
-      <Tooltip
-        placement="top"
-        :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
-      >
+    <Tooltip
+      v-if="getShowUpdate"
+      placement="top"
+      :title="dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT)"
+    >
+      <div class="text-center text-xs truncate p-5" style="color: #999">
         <div
           :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 14 }) }"
           class="truncate"
@@ -105,7 +106,7 @@
             {{ dateUtil(props?.value?.updateTime || new Date()).format(DEFAULT_DATE_FORMAT) }}
           </span>
         </div>
-      </Tooltip>
-    </div>
+      </div>
+    </Tooltip>
   </div>
 </template>

@@ -49,6 +49,8 @@
 
   const ROUTER = useRouter();
 
+  // unref(ROUTE).name = unref(ROUTE).fullPath;
+
   const { createMessage, createConfirm } = useMessage();
 
   const getBoardId = computed(() => {

@@ -136,9 +136,18 @@
 
   const handleViewBoard = (record: DataBoardRecord) => {
     const hasDetailPermission = hasPermission('api:yt:data_component:list');
-    if (hasDetailPermission)
-      router.push(`/data/board/detail/${encode(record.id)}/${encode(record.name)}`);
-    else createMessage.warning('没有权限');
+    if (hasDetailPermission) {
+      const boardId = encode(record.id);
+      const boardName = encode(record.name);
+      router.push(`/visual/board/detail/${boardId}/${boardName}`);
+      // router.push({
+      //   name: 'visualBoardDetail'
+      //   params: {
+      //     boardId: encode(record.id),
+      //     boardName: encode(record.name),
+      //   },
+      // });
+    } else createMessage.warning('没有权限');
   };
 
   const handlePagenationPosition = () => {