Merge branch 'ww' into 'main'

fix: DEFECT-736 reset default color after color picker clean color

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

@@ -18,6 +18,10 @@
     config: {
       type: Object as PropType<ColorPicker.Options>,
     },
+    defaultValue: {
+      type: String,
+      default: '',
+    },
   });
 
   const emit = defineEmits(['update:value']);
@@ -47,6 +51,12 @@
     unref(picker)?.hide();
   };
 
+  const onClear = () => {
+    emit('update:value', props.defaultValue);
+    unref(picker)?.hide();
+    unref(picker)?.setColor(props.defaultValue);
+  };
+
   const getOption = computed<ColorPicker.Options>(() => {
     const { config = {} } = props;
     return {
@@ -94,11 +104,13 @@
     picker.value = ColorPicker.create(unref(getOption));
     unref(picker)?.on('init', onInit);
     unref(picker)?.on('save', onSave);
+    unref(picker)?.on('clear', onClear);
   });
 
   onUnmounted(() => {
     unref(picker)?.off('init', onInit);
     unref(picker)?.off('save', onSave);
+    unref(picker)?.off('clear', onClear);
 
     unref(picker)?.destroyAndRemove();
   });

@@ -60,19 +60,31 @@
   }
 
   const getRadio = computed(() => {
-    const { radio } = props.radio;
-    return radio;
+    // const { radio } = props.radio;
+    return props.radio;
+  });
+
+  const getChardRadio = computed(() => {
+    const realWidth = unref(chartRef)?.getWidth();
+    const realHeight = unref(chartRef)?.getHeight();
+    const radioRecord = props.radio;
+    // const widht
+    return {
+      ...radioRecord,
+      height: realHeight || radioRecord.height,
+      width: realWidth || radioRecord.height,
+    };
   });
 
   const beforeUpdateFn = (componentType: InstrumentComponentType) => {
     if (componentType === 'instrument-component-1') return update_instrument_1_font;
     if (componentType === 'instrument-component-2') return update_instrument_2_font;
-    return (_radio: number) => {};
+    return (_radio: RadioRecord) => {};
   };
 
   function update() {
     const option = beforeUpdateFn(props.layout.componentType);
-    unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {});
+    unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
     unref(chartRef)?.resize();
   }
 
@@ -97,7 +109,7 @@
   const updateChartFont = useThrottleFn(() => {
     const option = beforeUpdateFn(props.layout.componentType);
     setTimeout(() => {
-      unref(chartRef)?.setOption((option(unref(getRadio)) as unknown as EChartsOption) || {});
+      unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
     });
   }, 500);
 
@@ -143,7 +155,10 @@
     <div>
       <div
         class="text-center"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 16, max: 18 }), color: '#666' }"
+        :style="{
+          fontSize: fontSize({ radioRecord: getRadio, basic: 16, max: 18 }),
+          color: '#666',
+        }"
       >
         {{ props.value.name }}
       </div>
@@ -157,7 +172,10 @@
       >
         <div
           class="text-xs text-center truncate p-5"
-          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }), color: '#999' }"
+          :style="{
+            fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }),
+            color: '#999',
+          }"
         >
           <span class="mr-2">更新时间:</span>
           <span>

@@ -53,8 +53,9 @@
   });
 
   const getRadio = computed(() => {
-    const { radio } = props.radio || DEFAULT_RADIO_RECORD;
-    return radio;
+    // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
+    // return radio;
+    return props.radio || DEFAULT_RADIO_RECORD;
   });
 
   let timeout: Nullable<number> = null;
@@ -91,7 +92,7 @@
             :size="4"
             :style="{
               backgroundColor: '#585357',
-              padding: fontSize({ radio: getRadio, basic: 10 }),
+              padding: fontSize({ radioRecord: getRadio, basic: 10 }),
             }"
           >
             <div
@@ -100,8 +101,8 @@
               class="digital-wrapper__int"
               :style="{
                 color: getPropsValue.fontColor,
-                fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
-                padding: fontSize({ radio: getRadio, basic: 5 }),
+                fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
+                padding: fontSize({ radioRecord: getRadio, basic: 5 }),
               }"
             >
               <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
@@ -118,7 +119,7 @@
             :size="4"
             :style="{
               backgroundColor: '#b74940',
-              padding: fontSize({ radio: getRadio, basic: 10 }),
+              padding: fontSize({ radioRecord: getRadio, basic: 10 }),
             }"
           >
             <div
@@ -127,8 +128,8 @@
               class="digital-wrapper__float"
               :style="{
                 color: getPropsValue.fontColor,
-                fontSize: fontSize({ radio: getRadio, basic: 20, max: 20 }),
-                padding: fontSize({ radio: getRadio, basic: 5 }),
+                fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
+                padding: fontSize({ radioRecord: getRadio, basic: 5 }),
               }"
             >
               <div class="digital-text__float p-1 text-light-50">
@@ -137,8 +138,8 @@
             </div>
           </Space>
           <div
-            class="px-1"
-            :style="{ fontSize: fontSize({ radio: getRadio, basic: 18, max: 18 }) }"
+            class="px-1 font-bold"
+            :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18, max: 18 }) }"
           >
             {{ getPropsValue.unit }}
           </div>
@@ -147,7 +148,7 @@
 
       <div
         class="text-center truncate"
-        :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
+        :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18 }) }"
       >
         <span>{{ props.value.name || '电表' }}</span>
       </div>
@@ -161,7 +162,10 @@
       >
         <div
           class="text-center text-xs truncate p-5"
-          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 16 }), color: '#999' }"
+          :style="{
+            fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 16 }),
+            color: '#999',
+          }"
         >
           <span class="mr-1">更新时间:</span>
           <span>

 import { EChartsOption } from 'echarts';
-import { fontSize } from '../../detail/config/util';
+import { fontSize, RadioRecord } from '../../detail/config/util';
 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
 import {
   ComponentInfo,
@@ -240,8 +240,8 @@ export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
   return record.find((item) => item.key === key);
 };
 
-export const update_instrument_1_font = (radio: number) => {
-  const basicFontSize = fontSize({ radio, basic: 16, max: 16, min: 12 });
+export const update_instrument_1_font = (radioRecord: RadioRecord) => {
+  const basicFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 12 });
   return {
     series: [
       {
@@ -256,9 +256,9 @@ export const update_instrument_1_font = (radio: number) => {
   } as EChartsOption;
 };
 
-export const update_instrument_2_font = (radio: number) => {
-  const axisLabelFontSize = fontSize({ radio, basic: 10, max: 16 });
-  const detailFontSize = fontSize({ radio, basic: 16, max: 16, min: 10 });
+export const update_instrument_2_font = (radioRecord: RadioRecord) => {
+  const axisLabelFontSize = fontSize({ radioRecord, basic: 10, max: 16 });
+  const detailFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 10 });
   return {
     series: [
       {

@@ -22,8 +22,9 @@
   const getImagBase64 = ref(fallback);
 
   const getRadio = computed(() => {
-    const { radio } = props.radio || DEFAULT_RADIO_RECORD;
-    return radio;
+    // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
+    // return radio;
+    return props.radio || DEFAULT_RADIO_RECORD;
   });
 
   const getWidth = computed(() => {
@@ -69,7 +70,7 @@
     <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
     <div
       class="w-full text-center truncate p-5"
-      :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }), color: '#999' }"
+      :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }"
     >
       <Tooltip
         placement="top"

@@ -47,8 +47,9 @@
   });
 
   const getRadio = computed(() => {
-    const { radio } = props.radio;
-    return radio;
+    // const { radio } = props.radio;
+    // return radio;
+    return props.radio || DEFAULT_RADIO_RECORD;
   });
 </script>
 
@@ -66,8 +67,8 @@
               prefix="iconfont"
               :style="{
                 color: props.value.iconColor,
-                width: fontSize({ radio: getRadio, basic: 50, min: 16 }),
-                height: fontSize({ radio: getRadio, basic: 50, min: 16 }),
+                width: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
+                height: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
               }"
             />
           </div>
@@ -77,12 +78,12 @@
               class="truncate"
               :suffix="getShowUnit ? props.value.unit : ''"
               :value-style="{
-                fontSize: fontSize({ radio: getRadio, basic: 24, min: 16 }),
+                fontSize: fontSize({ radioRecord: getRadio, basic: 24, min: 16 }),
                 color: props.value.fontColor,
               }"
             />
           </div>
-          <div :style="{ color: '#666', fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
+          <div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
             <!-- {{ getShowUnit ? props.value.unit : '' }} -->
             {{ props.value.name }}
           </div>
@@ -103,7 +104,7 @@
     >
       <div class="text-center text-xs truncate p-5" style="color: #999">
         <div
-          :style="{ fontSize: fontSize({ radio: getRadio, basic: 12, max: 12 }) }"
+          :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
           class="truncate"
         >
           <span class="mr-1">更新时间:</span>

@@ -63,7 +63,7 @@
         :key="index"
       >
         <Tooltip :title="item.deviceName" placement="top">
-          <span>
+          <span class="font-bold">
             <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
             <span>{{ item.deviceRename || item.deviceName }}</span>
           </span>

+import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
+import { copyTransFun } from '/@/utils/fnUtils';
 export enum ViewType {
   PRIVATE_VIEW = 'PRIVATE_VIEW',
   PUBLIC_VIEW = 'PUBLIC_VIEW',
@@ -9,12 +11,29 @@ export const formSchema: FormSchema[] = [
     field: 'name',
     label: '名称',
     component: 'Input',
-    required: true,
+    rules: [{ required: true, message: '请输入看板名称' }],
     componentProps: {
       placeholder: '请输入看板名称',
     },
   },
   {
+    field: 'organizationId',
+    component: 'ApiTreeSelect',
+    label: '组织',
+    rules: [{ required: true, message: '组织为必填项' }],
+    componentProps() {
+      return {
+        placeholder: '请选择组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
+          return data;
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
     field: 'viewType',
     label: '名称',
     component: 'RadioGroup',

+import { getOrganizationList } from '/@/api/system/system';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+import { copyTransFun } from '/@/utils/fnUtils';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '看板名称',
+    component: 'Input',
+    // colProps: { span: 10 },
+    colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+  },
+  {
+    field: 'organizationId',
+    component: 'ApiTreeSelect',
+    label: '组织',
+    // colProps: { span: 10 },
+    colProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    componentProps() {
+      return {
+        placeholder: '请选择组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
+          return data;
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+];

@@ -25,7 +25,7 @@ export const calcScale = (
   width = width * (widthRadio / 100);
   height = height * (heightRadio / 100);
 
-  const temp = width * height;
+  const temp = width > height ? height ** 2 : width ** 2;
 
   const isLess = temp < 300 * 300;
 
@@ -40,16 +40,17 @@ export const calcScale = (
 };
 
 export const fontSize = ({
-  radio,
+  radioRecord,
   basic,
   max,
   min,
 }: {
-  radio: number;
+  radioRecord: RadioRecord;
   basic: number;
   max?: number;
   min?: number;
 }) => {
+  const { radio } = radioRecord;
   let res = basic * radio;
   if (max && res > max) res = max;
   if (min && res < min) res = min;

@@ -28,6 +28,11 @@ export enum Gradient {
   SECOND = 'second',
   THIRD = 'third',
 }
+export enum GradientColor {
+  FIRST = '#67e0e3',
+  SECOND = '#37a2da',
+  THIRD = '#fd666d',
+}
 
 export enum visualOptionField {
   FONT_COLOR = 'fontColor',
@@ -48,6 +53,9 @@ export const modeOne: FormSchema[] = [
     label: '数值字体颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#000',
+    },
   },
 ];
 
@@ -57,6 +65,9 @@ export const modeTwo: FormSchema[] = [
     label: '数值字体颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#000',
+    },
   },
   {
     field: visualOptionField.UNIT,
@@ -71,6 +82,9 @@ export const modeTwo: FormSchema[] = [
     label: '图标颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#367BFF',
+    },
   },
   {
     field: visualOptionField.ICON,
@@ -92,6 +106,9 @@ export const modeThree: FormSchema[] = [
     label: '数值字体颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#000',
+    },
   },
   {
     field: visualOptionField.UNIT,
@@ -106,6 +123,9 @@ export const modeThree: FormSchema[] = [
     label: '一阶段颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: GradientColor.FIRST,
+    },
   },
   {
     field: visualOptionField.FIRST_PHASE_VALUE,
@@ -121,6 +141,9 @@ export const modeThree: FormSchema[] = [
     label: '二阶段颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: GradientColor.SECOND,
+    },
   },
   {
     field: visualOptionField.SECOND_PHASE_VALUE,
@@ -138,6 +161,9 @@ export const modeThree: FormSchema[] = [
     label: '三阶段颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: GradientColor.THIRD,
+    },
   },
   {
     field: visualOptionField.THIRD_PHASE_VALUE,
@@ -158,6 +184,9 @@ export const modeFour: FormSchema[] = [
     label: '数值字体颜色',
     component: 'ColorPicker',
     changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#000',
+    },
   },
   {
     field: visualOptionField.UNIT,

@@ -19,6 +19,8 @@
   import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { encode } from './config/config';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { formSchema } from './config/searchForm';
 
   const ListItem = List.Item;
   const router = useRouter();
@@ -28,6 +30,21 @@
   const listEL = ref();
   const loading = ref(false);
   const dataBoardList = ref<DataBoardRecord[]>([]);
+
+  const [searchFormRegister, searchFormMethod] = useForm({
+    schemas: formSchema,
+    labelWidth: 80,
+    layout: 'inline',
+    submitButtonOptions: {
+      loading: loading,
+    },
+    submitFunc: async () => {
+      try {
+        await getDatasource();
+      } catch (error) {}
+    },
+  });
+
   //分页相关
   const page = ref(1);
   const pageSize = ref(10);
@@ -87,9 +104,11 @@
   const getDatasource = async () => {
     try {
       loading.value = true;
+      const params = searchFormMethod.getFieldsValue() || {};
       const { total, items } = await getDataBoardList({
         page: unref(paginationProp).current,
         pageSize: unref(paginationProp).pageSize,
+        ...params,
       });
       dataBoardList.value = items;
       paginationProp.value.total = total;
@@ -176,12 +195,16 @@
 
 <template>
   <PageWrapper>
-    <div class="flex mb-6 items-center bg-light-100 h-78px">
+    <div class="flex items-center mb-3 bg-light-100 h-78px">
       <div class="text-lg ml-30px mr-9px font-bold">自定义看板</div>
       <Authority value="api:yt:data_board:add:post">
         <Button type="primary" @click="handleOpenDetailModal">创建看板</Button>
       </Authority>
     </div>
+    <div class="bg-light-100 mb-6 w-full p-3 search-form">
+      <BasicForm class="flex-auto w-full" @register="searchFormRegister" />
+    </div>
+    <!-- <div> </div> -->
     <Spin :spinning="loading">
       <List
         ref="listEL"
@@ -193,7 +216,7 @@
           <ListItem>
             <Card class="data-card cursor-pointer">
               <template #title>
-                <div>{{ item.name }}</div>
+                <div class="font-bold">{{ item.name }}</div>
               </template>
               <template #extra>
                 <Dropdown
@@ -266,4 +289,19 @@
       background-image: url('/@/assets/svg/component.svg');
     }
   }
+
+  .search-form {
+    width: 100%;
+    form {
+      width: 100%;
+      :deep(.ant-row) {
+        width: 100%;
+      }
+
+      :deep(.ant-row > div:last-child) {
+        flex: 1;
+        max-width: 100%;
+      }
+    }
+  }
 </style>