.

src/components/kpi/BUPanel.jsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { observer } from "mobx-react";
+// import { stores_Context } from '../config';
+import { Table } from 'antd';
+
+export default observer((props) => {
+  // const {  } = useContext(stores_Context);
+    return (
+      <>
+      {props.title}
+      </>
+    );
+});

src/components/kpi/OverviewPanel.jsx

@@ -0,0 +1,37 @@
+import { useContext } from 'react';
+import { observer } from "mobx-react";
+// import { stores_Context } from '../config';
+import { Button, Table, Switch, Input, Space, Typography, Row, Col, Spin, Radio, Tabs } from 'antd';
+import SearchForm from './../search/SearchForm';
+import { bu } from './../../libs/ht';
+
+export default observer((props) => {
+  // const {  } = useContext(stores_Context);
+    return (
+      <>
+      <Row gutter={16} style={{ margin: '0 0 1em' }}>
+        <Col className="gutter-row" span={24} style={{ margin: '0 0 -16px 0', padding: 0 }}>
+          <SearchForm
+            defaultValue={{
+              'initialValue': {
+                // ...searchPayloadHome,
+              },
+              // hides: ['businessUnits', 'months', 'WebCode', 'dates'],
+              shows: ['DateType', 'DepartmentList', 'WebCode', 'years'],
+              'fieldProps': {
+                DepartmentList: { show_all: false },
+                WebCode: { show_all: false },
+                years: { hide_vs: true },
+              },
+            }}
+            confirmText='查询'
+            onSubmit={(_err, obj, form, str) => {
+              // TradeStore.setStateSearch(form);
+              // pageRefresh(obj);
+            }}
+          />
+        </Col>
+      </Row>
+      </>
+    );
+});

src/components/search/SearchForm.jsx

@@ -40,7 +40,7 @@ export default observer((props) => {
     shows: [],
     ...props.defaultValue,
   };
-  const { onSubmit } = props;
+  const { onSubmit, confirmText } = props;
 
   const onFinish = (values) => {
     console.log('Received values of form, origin form value: ', values);
@@ -152,10 +152,14 @@ export default observer((props) => {
       // 'DateType': undefined,
     });
   };
+  const onValuesChange = (...args) => {
+    const [changedValues, allValues] = args;
+    console.log('form onValuesChange', args);
+  };
 
   return (
     // layout="inline"
-    <Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish}>
+    <Form form={form} name="advanced_search" className="orders-search-form" onFinish={onFinish} onValuesChange={onValuesChange}>
       <EditableContext.Provider value={form}>
         <Row gutter={10} style={{ background: '#f9fafa', margin: '0px 0px 10px 0px', padding: '16px 8px' }}>
           {getFields({ sort, initialValue, hides, shows, fieldProps, form })}
@@ -163,7 +167,7 @@ export default observer((props) => {
           <Col flex="1 0 120px" style={{ padding: '0px 5px',  }}>
             <Space align="center">
               <Button size={'middle'} type="primary" icon={<SearchOutlined />} htmlType="submit">
-                统计
+                {confirmText || '统计'}
               </Button>
               {/* <Button size="small" onClick={onReset}>
                 重置

src/libs/ht.js

@@ -104,11 +104,11 @@ export const dataFieldAlias = dataFieldOptions.reduce(
  * KPI对象
  */
 export const KPIObjects = [
-  { value: 'overview', label: '总额' },
+  { key: 'overview', value: 'overview', label: '总额' },
-  { value: 'bu', label: '事业部' },
+  { key: 'bu', value: 'bu', label: '事业部' },
-  { value: 'dept', label: '小组' },
+  { key: 'dept', value: 'dept', label: '小组' },
-  { value: 'du', label: '顾问小组' },
+  { key: 'du', value: 'du', label: '顾问小组' },
-  { value: 'operator', label: '顾问' },
+  { key: 'operator', value: 'operator', label: '顾问' },
-  { value: 'destination', label: '目的地' },
+  { key: 'destination', value: 'destination', label: '目的地' },
-  { value: 'country', label: '国籍' },
+  { key: 'country', value: 'country', label: '国籍' },
 ];

src/stores/DictData.js

@@ -4,13 +4,21 @@ import { isEmpty, sortBy, objectMapper } from '../utils/commons';
 
 const modelMapper = {
   'operator': {
-    url: '/service-web/baseinfo/operator/test',
+    url: '/service-Analyse2/GetOperatorInfo',
     mapper: {
       op_id: [{ key: 'key' }, { key: 'value' }],
       cn_name: { key: 'label' },
       en_name: { key: 'label_alias' },
     },
   },
+  'country': {
+    url: '/service-Analyse2/GetCountryInfo',
+    mapper: {
+      c_id: [{ key: 'key' }, { key: 'value' }],
+      cn_name: { key: 'label' },
+      en_name: { key: 'label_alias' },
+    },
+  },
   'vendor': {
     url: '/service-web/QueryData/GetVEIName',
     mapper: {
@@ -32,10 +40,10 @@ class DictData {
     makeAutoObservable(this);
   }
 
-  async fetchDictData(model = '') {
+  async fetchDictData(model = '', param={}) {
     const mkey = model.toLowerCase();
     this[mkey] = { loading: true, dataSource: [] };
-    const json = await req.fetchJSON(modelMapper[mkey].url);
+    const json = await req.fetchJSON(modelMapper[mkey].url, param);
     if (json.errcode === 0) {
       runInAction(() => {
         this[mkey].loading = false;

src/views/KPI.jsx

@@ -3,15 +3,32 @@ import { observer, useLocalStore } from 'mobx-react';
 import { toJS } from 'mobx';
 // import type { ProColumns } from '@ant-design/pro-components';
 import { EditableProTable, ProCard, ProFormField } from '@ant-design/pro-components';
-import { Button, Table, Switch, Input, Space, Typography, Row, Col, Spin, Radio } from 'antd';
+import { Button, Table, Switch, Input, Space, Typography, Row, Col, Spin, Radio, Tabs } from 'antd';
 import { stores_Context } from '../config';
 import { isEmpty, fixTo4Decimals, cloneDeep } from './../utils/commons';
 import SearchForm from './../components/search/SearchForm';
+import BUPanel from './../components/kpi/BUPanel';
+import OverviewPanel from './../components/kpi/OverviewPanel';
 import { KPIObjects } from './../libs/ht';
-
+import './kpi.css';
 const { Text } = Typography;
 const initialPercentKey = new Array(12).fill(1).reduce((r, v, i) => ({ ...r, [`M${i + 1}Percent`]: [8, 9].includes(i) ? 10 : 8 }), {});
-
+const itemComponents = {
+  'overview': OverviewPanel,
+  'bu': BUPanel,
+  'dept': BUPanel,
+  'du': BUPanel,
+  'operator': BUPanel,
+  'destination': BUPanel,
+  'country': BUPanel,
+};
+const tabsItems = KPIObjects.map((ele) => ({
+  ...ele,
+  label: ele.label,
+  key: ele.value,
+  children: BUPanel,
+}));
+console.log(tabsItems);
 export default observer((props) => {
   const [dataSource, setDataSource] = useState([]);
   const { KPIStore, DictDataStore } = useContext(stores_Context);
@@ -22,7 +39,8 @@ export default observer((props) => {
     KPIStore.getList().then((data) => {
       setDataSource(data);
     });
-    DictDataStore.fetchDictData('operator');
+    DictDataStore.fetchDictData('operator', { is_assign: 1 });
+    DictDataStore.fetchDictData('country');
     return () => {};
   }, []);
   const [editOpen, setEditOpen] = useState(false); // test:
@@ -137,11 +155,22 @@ export default observer((props) => {
   };
   return (
     <>
-    <Row>
+      <Row>
-      <Col span={24}>
+        <Col span={24}>
-        <Radio.Group options={KPIObjects} optionType="button" onChange={(e) => handleRadioChange(e.target.value)} />
+          {/* <Radio.Group options={KPIObjects} optionType="button" onChange={(e) => handleRadioChange(e.target.value)} /> */}
-      </Col>
+          <Tabs
-    </Row>
+            // onChange={onChange}
+            type="card"
+            items={KPIObjects.map((ele, i) => {
+              const ItemComponent = itemComponents[ele.key];
+              return {
+                ...ele,
+                children: <ItemComponent title={ele.label} />,
+              };
+            })}
+          />
+        </Col>
+      </Row>
       <Row gutter={16} style={{ margin: '0 0 1em' }}>
         <Col className="gutter-row" span={24} style={{ margin: '0 0 -16px 0', padding: 0 }}>
           <SearchForm
@@ -149,11 +178,11 @@ export default observer((props) => {
               'initialValue': {
                 // ...searchPayloadHome,
               },
-              hides: ['businessUnits', 'months', 'WebCode', 'dates'],
+              // hides: ['businessUnits', 'months', 'WebCode', 'dates'],
-              // shows: ['DateType', 'DepartmentList', 'WebCode', 'IncludeTickets', 'applyDate'],
+              shows: ['DateType', 'DepartmentList', 'WebCode', 'years'],
               'fieldProps': {
-                DepartmentList: { show_all: true },
+                DepartmentList: { show_all: false },
-                WebCode: { show_all: true },
+                WebCode: { show_all: false },
                 years: { hide_vs: true },
               },
             }}

src/views/kpi.css

@@ -0,0 +1,3 @@
+.ant-tabs.ant-tabs-card > .ant-tabs-nav {
+    margin-bottom: 0;
+}