diff --git a/io.sc.platform.core.frontend/src/platform/components/echarts/WEcharts.vue b/io.sc.platform.core.frontend/src/platform/components/echarts/WEcharts.vue
new file mode 100644
index 00000000..e43399d7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/echarts/WEcharts.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :style="echartsStyleComputed">
+    <div ref="echartsRef" class="w-full h-full"></div>
+    <q-resize-observer @resize="onResize" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineProps, nextTick } from 'vue';
+import * as echarts from 'echarts';
+import { eventBus } from '@/platform';
+
+const echartsRef = ref();
+let echartsObject: echarts.ECharts | null = null;
+
+/**
+ * 组件接收属性
+ */
+const props = defineProps({
+  width: { type: [Number, String], default: '98%' },
+  height: { type: [Number, String], default: '98%' },
+  option: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+});
+
+/**
+ * 高宽计算
+ */
+const echartsStyleComputed = computed(() => {
+  let width = props.width;
+  let height = props.height;
+  if (typeof props.width === 'number') {
+    width = props.width + 'px';
+  }
+  if (typeof props.height === 'number') {
+    height = props.height + 'px';
+  }
+  return 'width: ' + width + ';height: ' + height + ';';
+});
+
+/**
+ * 初始化 Echarts
+ */
+const initEcharts = () => {
+  const dom: HTMLElement | null = echartsRef.value;
+  echartsObject = echarts.init(dom);
+  echartsObject.setOption(props.option);
+};
+
+/**
+ * 语言改变事件
+ */
+eventBus.on('onLocaleChanged', (local) => {
+  nextTick(() => {
+    echartsObject?.setOption(props.option);
+    echartsObject?.resize();
+  });
+});
+
+/**
+ * 窗口大小发生变化
+ */
+const onResize = () => {
+  setTimeout(() => {
+    // 延迟重新设置echarts图表，否则无法拿到dom的高宽，重设之后的高宽不正确。
+    echartsObject?.resize();
+  }, 100);
+};
+
+nextTick(() => {
+  // 延迟初始化echarts图表，否则无法拿到dom的高宽，导致高宽不正确。
+  setTimeout(() => {
+    initEcharts();
+  }, 100);
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
index b8c0b26a..436a99b4 100644
--- a/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/grid/WGrid.vue
@@ -854,19 +854,39 @@ const expandFun = (arr, treeExpand) => {
   });
 };
 
+const screenCols = { xs: 1, sm: 2, md: 3, lg: 4, xl: 6 };
+const queryFormColsNumComputed = computed(() => {
+  if (typeof props.queryFormColsNum === 'number' && props.queryFormColsNum > 0) {
+    return props.queryFormColsNum;
+  } else if (typeof props.queryFormColsNum === 'object') {
+    const screen = { ...screenCols, ...props.queryFormColsNum };
+    return screen[$q.screen.name];
+  }
+  return screenCols[$q.screen.name];
+});
+
 // 处理toobar
 const buttons_ = ref(<any>[]);
-const handleChildrenBtn = (arr) => {
+const handleChildrenBtn = (arr, moreQueryShow) => {
   const tempArr = <any>[];
   for (let i = 0; i < arr.length; i++) {
     const btn = arr[i];
     if (Array.isArray(btn) && btn.length > 0) {
-      const handleResult = handleChildrenBtn(btn);
+      const handleResult = handleChildrenBtn(btn, moreQueryShow);
       if (handleResult && handleResult.length > 0) {
         tempArr.push(handleResult);
       }
     } else if (typeof btn === 'string' && buttonObj[btn]) {
-      tempArr.push(buttonObj[btn]);
+      if (btn === buttonObj.query.name && i === 0) {
+        // 查询按钮为第一个时，追加更多查询时直接追加到查询按钮当前所在下标的后面一个，不能追加为数组，否则按钮组取第一个为 QBtnDropdown 左边按钮时取到的是一个数组，会报错。
+        // ['query', 'reset']
+        tempArr.push(buttonObj[btn]);
+        tempArr.push(buttonObj[buttonObj.moreQuery.name]);
+      } else if (btn === buttonObj.query.name) {
+        tempArr.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
+      } else {
+        tempArr.push(buttonObj[btn]);
+      }
     } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
       tempArr.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
     } else {
@@ -877,11 +897,33 @@ const handleChildrenBtn = (arr) => {
 };
 const handleToolbarActions = () => {
   buttons_.value.splice(0, buttons_.value.length);
+  // 处理查询按钮，符合条件时给其追加更多查询按钮
+  let moreQueryShow = false;
+  const rowColsNum = queryFormColsNumComputed.value * (props.queryFormRowNum || 1);
+  let currRowColsNum = 0;
+  let showQueryFormFieldNum = 0;
+  props.queryFormFields.forEach((item: any) => {
+    if (Tools.hasOwnProperty(item, 'colSpan')) {
+      currRowColsNum += item.colSpan;
+    } else {
+      currRowColsNum += 1;
+    }
+    if (currRowColsNum <= rowColsNum) {
+      showQueryFormFieldNum += 1;
+    }
+  });
+  if (showQueryFormFieldNum < props.queryFormFields.length) {
+    moreQueryShow = true;
+  }
   props.toolbarActions.forEach((btn: any, index) => {
     if (typeof btn === 'string' && buttonObj[btn]) {
-      buttons_.value.push(buttonObj[btn]);
+      if (btn === buttonObj.query.name && moreQueryShow) {
+        buttons_.value.push([buttonObj[btn], buttonObj[buttonObj.moreQuery.name]]);
+      } else {
+        buttons_.value.push(buttonObj[btn]);
+      }
     } else if (Array.isArray(btn) && btn.length > 0) {
-      buttons_.value.push(handleChildrenBtn(btn));
+      buttons_.value.push(handleChildrenBtn(btn, moreQueryShow));
     } else if (typeof btn === 'object' && btn.extend && buttonObj[btn.extend]) {
       // 继承内置按钮
       buttons_.value.push({ ...buttonObj[btn.extend], ...btn, _click: buttonObj[btn.extend].click });
@@ -1338,16 +1380,18 @@ const buildQueryCriterias = (reqParams) => {
     urlSearchParams.append('criteria', JSON.stringify(queryCriteria));
   }
   if (queryFormRef.value) {
-    const queryFormData = queryFormRef.value.getData();
-    Object.keys(queryFormData).forEach((item) => {
-      if (!isEmpty(queryFormData[item])) {
-        const criteria = <CriteriaType>{
-          fieldName: item,
-          operator: queryFormFieldsMap.get(item).queryOperator || OperatorTypeEnum.contains,
-          value: queryFormData[item],
-        };
-        urlSearchParams.append('criteria', JSON.stringify(criteria));
-      }
+    nextTick(() => {
+      const queryFormData = queryFormRef.value.getData();
+      Object.keys(queryFormData).forEach((item) => {
+        if (!isEmpty(queryFormData[item])) {
+          const criteria = <CriteriaType>{
+            fieldName: item,
+            operator: queryFormFieldsMap.get(item).queryOperator || OperatorTypeEnum.contains,
+            value: queryFormData[item],
+          };
+          urlSearchParams.append('criteria', JSON.stringify(criteria));
+        }
+      });
     });
   }
   return urlSearchParams;
@@ -2227,7 +2271,7 @@ const handlerQueryFormShowField = () => {
     });
   } else {
     // 一行应该显示的字段个数
-    const rowColsNum = (Tools.isUndefinedOrNull(queryFormRef.value) ? 4 : queryFormRef.value.getColsNum()) * (props.queryFormRowNum || 1);
+    const rowColsNum = queryFormColsNumComputed.value * (props.queryFormRowNum || 1);
     let currRowColsNum = 0;
     props.queryFormFields.forEach((item: any) => {
       if (Tools.hasOwnProperty(item, 'colSpan')) {
diff --git a/io.sc.platform.core.frontend/src/platform/components/index.ts b/io.sc.platform.core.frontend/src/platform/components/index.ts
index fda76f29..ed9ea57f 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -46,6 +46,8 @@ import WTreeGrid from './tree/WTreeGrid.vue';
 import WWorkflowAction from './workflow/WWorkflowAction.vue';
 import WSelectAssigneeDialog from './workflow/WSelectAssigneeDialog.vue';
 
+import WEcharts from './echarts/WEcharts.vue';
+
 export default {
   install: (app: App) => {
     app.component('WPlatformPage', WPlatformPage);
@@ -93,6 +95,8 @@ export default {
 
     app.component('WWorkflowAction', WWorkflowAction);
     app.component('WSelectAssigneeDialog', WSelectAssigneeDialog);
+
+    app.component('WEcharts', WEcharts);
   },
 };
 
@@ -130,6 +134,7 @@ export {
   WTreeGrid,
   WWorkflowAction,
   WSelectAssigneeDialog,
+  WEcharts,
 };
 
 export { PlatformIconEnum } from './utils';
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
index e2e3a619..796e2d01 100644
--- a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue
@@ -483,6 +483,14 @@ const buttonClick = async (button) => {
 </script>
 
 <style lang="css">
+.w-toolbar .q-btn.disabled {
+  opacity: 0.7 !important;
+  color: #a8a8a8;
+}
+.w-toolbar .q-item.disabled {
+  opacity: 0.6 !important;
+  color: #a8a8a8;
+}
 .w-toolbar-btn-dropdown .q-btn.disabled {
   opacity: 0.7 !important;
   color: #a8a8a8;
diff --git a/io.sc.platform.core.frontend/src/platform/index.ts b/io.sc.platform.core.frontend/src/platform/index.ts
index 0ced1d6a..7b275be9 100644
--- a/io.sc.platform.core.frontend/src/platform/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/index.ts
@@ -149,6 +149,7 @@ export {
   WTreeGrid,
   WWorkflowAction,
   WSelectAssigneeDialog,
+  WEcharts,
 } from './components';
 
 export { PlatformIconEnum } from './components';