Merge branch 'fix/front/10-25/2024' into 'main_dev'

perf: 调用统计显示折线图为图示了

See merge request yunteng/thingskit-front!1516

@@ -46,6 +46,12 @@
 
   const chartRef = ref<HTMLDivElement | null>(null);
 
+  const watchClientWidth = () => {
+    return `width:${document.body.clientWidth - 280}px`;
+  };
+
+  const resizeStatus = ref(false);
+
   const { setOptions, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
 
   const getOptions = (): EChartsOption => {
@@ -99,6 +105,7 @@
     window.addEventListener('resize', () => {
       resize();
       setOptions(getOptions());
+      resizeStatus.value = true;
     });
   });
 
@@ -106,6 +113,7 @@
     const startTs = Date.now() - e.target.value;
     const endTs = Date.now();
     emits('emitTimeRange', e.target.value, startTs, endTs);
+    watchClientWidth();
   };
 </script>
 <template>
@@ -120,9 +128,11 @@
         </template>
       </a-radio-group>
     </template>
+    <!-- 不能使用100%设为宽，width=100%，实际是100px-->
     <div
       v-show="(chartsData?.series as SeriesOption[])?.length"
       ref="chartRef"
+      :style="!resizeStatus ? watchClientWidth() : `null`"
       class="w-full h-80"
     ></div>
     <div

@@ -46,7 +46,7 @@ export const modeApiForm: FormSchema[] = [
     component: 'Input',
     componentProps: {
       maxLength: 32,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.name')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.name')}`,
     },
   },
   {
@@ -58,7 +58,7 @@ export const modeApiForm: FormSchema[] = [
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.restEndpointUrlPattern'
       )}`,
     },
@@ -70,7 +70,7 @@ export const modeApiForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: ApiFormPartialConfig.requestMethod,
     componentProps: {
-      placeholder: `${t('rule.dataflow.index.pleaseSelect')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseSelect')}${t(
         'rule.dataflow.index.requestMethod'
       )}`,
       options: ApiFormPartialConfig.getRequestMethod(),
@@ -106,7 +106,7 @@ export const modeApiForm: FormSchema[] = [
     component: 'InputNumber',
     defaultValue: ApiFormPartialConfig.proxyPort,
     componentProps: {
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.proxyPort')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.proxyPort')}`,
       maxLength: 255,
       min: 1,
       max: 65535,
@@ -123,7 +123,7 @@ export const modeApiForm: FormSchema[] = [
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.proxyUser')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.proxyUser')}`,
     },
     ifShow: ({ values }) => {
       return !!values.enableProxy;
@@ -137,7 +137,7 @@ export const modeApiForm: FormSchema[] = [
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.proxyPassword'
       )}`,
     },
@@ -248,7 +248,7 @@ export const modeApiForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: ApiFormPartialConfig.type,
     componentProps: {
-      placeholder: `${t('rule.dataflow.index.pleaseSelect')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseSelect')}${t(
         'rule.dataflow.index.credentialsType'
       )}`,
       options: ApiFormPartialConfig.getType(),
@@ -270,7 +270,7 @@ export const modeApiForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.username')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.username')}`,
     },
     ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
   },
@@ -282,7 +282,7 @@ export const modeApiForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.password')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.password')}`,
     },
     ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
   },
@@ -293,7 +293,7 @@ export const modeApiForm: FormSchema[] = [
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.password')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.password')}`,
     },
     ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
   },
@@ -306,7 +306,7 @@ export const modeApiForm: FormSchema[] = [
     componentProps: {
       maxLength: 255,
       rows: 4,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.remark')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.remark')}`,
     },
   },
 ];

@@ -49,7 +49,7 @@ export const modelKafkaForm: FormSchema[] = [
     component: 'Input',
     componentProps: {
       maxLength: 32,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.name')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.name')}`,
     },
   },
   {
@@ -61,7 +61,7 @@ export const modelKafkaForm: FormSchema[] = [
     defaultValue: KafkaFormPartialConfig.topicPattern,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.topicPattern'
       )}`,
     },
@@ -125,7 +125,7 @@ export const modelKafkaForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: KafkaFormPartialConfig.acks,
     componentProps: {
-      placeholder: `${t('rule.dataflow.index.pleaseSelect')} ${t('rule.dataflow.index.acks')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseSelect')}${t('rule.dataflow.index.acks')}`,
       options: KafkaFormPartialConfig.getAcks(),
     },
   },
@@ -176,7 +176,7 @@ export const modelKafkaForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: KafkaFormPartialConfig.kafkaHeadersCharset,
     componentProps: {
-      placeholder: `${t('rule.dataflow.index.pleaseSelect')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseSelect')}${t(
         'rule.dataflow.index.characterSet'
       )}`,
       options: KafkaFormPartialConfig.getkafkaHeadersCharset(),
@@ -193,7 +193,7 @@ export const modelKafkaForm: FormSchema[] = [
     componentProps: {
       maxLength: 255,
       rows: 4,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.remark')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.remark')}`,
     },
   },
 ];

@@ -34,7 +34,7 @@ export const modeMqttForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 32,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.name')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.name')}`,
     },
   },
   {
@@ -46,7 +46,7 @@ export const modeMqttForm: FormSchema[] = [
     defaultValue: MqttFormPartialConfig.topicPattern,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.topicPattern'
       )}`,
     },
@@ -59,7 +59,7 @@ export const modeMqttForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.host')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.host')}`,
     },
   },
   {
@@ -71,7 +71,7 @@ export const modeMqttForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.port')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.port')}`,
     },
   },
   {
@@ -83,7 +83,7 @@ export const modeMqttForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.connectTimeoutSec'
       )}`,
     },
@@ -109,7 +109,7 @@ export const modeMqttForm: FormSchema[] = [
           }
         },
         maxLength: 255,
-        placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.clientId')}`,
+        placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.clientId')}`,
       };
     },
   },
@@ -147,7 +147,7 @@ export const modeMqttForm: FormSchema[] = [
     componentProps: ({ formActionType }) => {
       const { setFieldsValue } = formActionType;
       return {
-        placeholder: `${t('rule.dataflow.index.pleaseSelect')} ${t(
+        placeholder: `${t('rule.dataflow.index.pleaseSelect')}${t(
           'rule.dataflow.index.credentialsType'
         )}`,
         options: MqttFormPartialConfig.getType(),
@@ -178,7 +178,7 @@ export const modeMqttForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.username')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.username')}`,
     },
     ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
   },
@@ -189,7 +189,7 @@ export const modeMqttForm: FormSchema[] = [
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.password')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.password')}`,
     },
     ifShow: ({ values }) => isBasic(Reflect.get(values, 'type')),
   },
@@ -200,7 +200,7 @@ export const modeMqttForm: FormSchema[] = [
     component: 'InputPassword',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.password')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.password')}`,
     },
     ifShow: ({ values }) => isPem(Reflect.get(values, 'type')),
   },
@@ -212,7 +212,7 @@ export const modeMqttForm: FormSchema[] = [
     componentProps: {
       maxLength: 255,
       rows: 4,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.remark')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.remark')}`,
     },
   },
 ];

@@ -38,7 +38,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     component: 'Input',
     componentProps: {
       maxLength: 32,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.name')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.name')}`,
     },
   },
   {
@@ -49,7 +49,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     defaultValue: '',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.exchangeNamePattern'
       )}`,
     },
@@ -62,7 +62,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     component: 'Input',
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.routingKeyPattern'
       )}`,
     },
@@ -74,7 +74,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     colProps: { span: 12 },
     defaultValue: null,
     componentProps: {
-      placeholder: `${t('rule.dataflow.index.pleaseSelect')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseSelect')}${t(
         'rule.dataflow.index.routingKeyPattern'
       )}`,
       options: RabbitMqFormPartialConfig.getMessageProperties(),
@@ -101,7 +101,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     required: true,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.port')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.port')}`,
     },
   },
   {
@@ -123,7 +123,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     defaultValue: RabbitMqFormPartialConfig.username,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.username')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.username')}`,
     },
   },
   {
@@ -134,7 +134,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     defaultValue: RabbitMqFormPartialConfig.password,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.password')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.password')}`,
     },
   },
   {
@@ -153,7 +153,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     defaultValue: RabbitMqFormPartialConfig.connectionTimeout,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.connectionTimeout'
       )}`,
     },
@@ -166,7 +166,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     defaultValue: RabbitMqFormPartialConfig.handshakeTimeout,
     componentProps: {
       maxLength: 255,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t(
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t(
         'rule.dataflow.index.handshakeTimeout'
       )}`,
     },
@@ -186,7 +186,7 @@ export const modeRabbitMqForm: FormSchema[] = [
     componentProps: {
       maxLength: 255,
       rows: 4,
-      placeholder: `${t('rule.dataflow.index.pleaseEnter')} ${t('rule.dataflow.index.remark')}`,
+      placeholder: `${t('rule.dataflow.index.pleaseEnter')}${t('rule.dataflow.index.remark')}`,
     },
   },
 ];