From a48bbf35f33a60cccd6fceb20f062aed16f2a9d1 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Fri, 8 Dec 2023 11:54:22 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DataPivot.jsx | 23 ++++++++++++---------
 src/views/Home.jsx      | 34 ++++++++++++++----------------
 src/views/Sale_KPI.jsx  | 46 +++++++++++++++++++++--------------------
 3 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/src/views/DataPivot.jsx b/src/views/DataPivot.jsx
index 18193a8..95c7b8c 100644
--- a/src/views/DataPivot.jsx
+++ b/src/views/DataPivot.jsx
@@ -383,17 +383,18 @@ export default observer((props) => {
         size={'small'}
         title={'透视选项'}
         extra={
-          <Space>
-            <Text type={'secondary'}>预设:</Text>
+          <Row gutter={3}>
+            <Col flex={'0 0 auto'}><Text type={'secondary'}>预设:</Text></Col>
             {quickOptions.map((ele, elei) => (
+            <Col key={ele.label}>
               <Button key={ele.label} onClick={() => quickOpt(elei)} type={'primary'} ghost size={'small'}>
                 {ele.label}
-              </Button>
+              </Button> </Col>
             ))}
-            <Button key={'reset-quick'} onClick={resetFields} type={'primary'} ghost size={'small'}>
+            <Col><Button key={'reset-quick'} onClick={resetFields} type={'primary'} ghost size={'small'}>
               重置
-            </Button>
-          </Space>
+            </Button></Col>
+          </Row>
         }
       >
         <Row gutter={16}>
@@ -407,7 +408,8 @@ export default observer((props) => {
                 ))}
             </div> */}
           </Col>
-          <Col span={12}>
+          {/* 行:  */}
+          <Col md={12} sm={24} xs={24}>
             <Row gutter={8} align={'middle'}>
               <Col flex={'4em'} align={'end'}>
                 <Text strong>行: </Text>
@@ -467,9 +469,10 @@ export default observer((props) => {
               </Col>
             </Row>
           </Col>
-          <Col span={12} style={{ borderLeft: '1px solid #d9d9d9' }}>
+          {/* 列:  */}
+          <Col md={12} sm={24} xs={24} style={{ borderLeft: '1px solid #d9d9d9' }}>
             <Row gutter={8} align={'middle'}>
-              <Col flex={'6em'} align={'end'}>
+              <Col flex={'4em'} align={'end'}>
                 <Text strong>列: </Text>
               </Col>
               <Col flex={'auto'}>
@@ -538,7 +541,7 @@ export default observer((props) => {
               走势: <span style={{ fontSize: 'smaller' }}>{dataFieldAlias[lineConfig.yField].label}</span>
             </h3>
           </Col>
-          <Col flex={'1 0 50%'} style={{ textAlign: 'right' }} align={'end'}>
+          <Col style={{ textAlign: 'right' }} align={'end'}>
             <DateGroupRadio
               visible={true}
               dataRaw={{ data1: dataBeforeXChange }}
diff --git a/src/views/Home.jsx b/src/views/Home.jsx
index de02378..86fdcc3 100644
--- a/src/views/Home.jsx
+++ b/src/views/Home.jsx
@@ -226,26 +226,26 @@ export default observer(() => {
         </Spin>
       </section>
       <section>
-        <Space gutter={16} size={'small'}>
-          <h3>{showDiff === false ? '走势' : '对比'}</h3>
-          <DataFieldRadio value={timeDataField} onChange={handleChangetimeDataField} />
-          <Radio.Group options={datePartOptions} optionType="button" onChange={handleChangeDateType} value={dateField} />
-          {searchValues.yearDiff && (
-            <Button type="link" size={'small'} onClick={() => setShowDiff(!showDiff)}>
+        <Row gutter={16}>
+          <Col flex={'4em'}><h3>{showDiff === false ? '走势' : '对比'}</h3></Col>
+          <Col ><DataFieldRadio value={timeDataField} onChange={handleChangetimeDataField} /></Col>
+          <Col ><Radio.Group options={datePartOptions} optionType="button" onChange={handleChangeDateType} value={dateField} /></Col>
+          <Col >{searchValues.yearDiff && (
+            <Button type="primary" ghost size={'small'} onClick={() => setShowDiff(!showDiff)}>
               {showDiff === false ? '显示对比' : '返回本期走势'}
             </Button>
-          )}
-        </Space>
+          )}</Col>
+        </Row>
         {showDiff === false ? (
           <Spin spinning={timeData.loading}>
             <MixTBWithKPI dataSource={timeData.dataSource} summaryData={timeData.origin?.summaryRows || []} {...lineConfig} />
           </Spin>
         ) : (
           <Spin spinning={timeDiffData.loading}>
-            <Space gutter={16} size={'small'}>
-              <h3>分类对比</h3>
-              <Radio.Group options={allGroupTypes} optionType="button" onChange={handleChangeDiffType} value={diffGroupKey} />
-            </Space>
+            <Row gutter={16}>
+              <Col flex={'6em'}><h3>分类对比</h3></Col>
+              <Col ><Radio.Group options={allGroupTypes} optionType="button" onChange={handleChangeDiffType} value={diffGroupKey} /></Col>
+            </Row>
             <LineWithKPI
               dataSource={timeDiffData.dataSource}
               showKPI={false}
@@ -293,12 +293,10 @@ export default observer(() => {
         </h3>
       </section>
       <section>
-        <Space>
-          <h3>TOP</h3>
-          <div>
-            <DataFieldRadio value={valueKey} onChange={handleChangeValueKey} />
-          </div>
-        </Space>
+        <Row gutter={16}>
+          <Col flex={'4em'}><h3>TOP</h3></Col>
+          <Col ><DataFieldRadio value={valueKey} onChange={handleChangeValueKey} /></Col>
+        </Row>
         <Row gutter={layoutProps3.gutter}>
           {topSeriesSet.map((item) =>
             item.graphVisible ? (
diff --git a/src/views/Sale_KPI.jsx b/src/views/Sale_KPI.jsx
index 9738372..685046d 100644
--- a/src/views/Sale_KPI.jsx
+++ b/src/views/Sale_KPI.jsx
@@ -183,37 +183,39 @@ const Sale_KPI = () => {
       <Spin spinning={loading}>
         <h2 style={{ marginTop: '.5em' }}>年度业绩组成和走势</h2>
         <Row>
-          <Col className="gutter-row" md={8}>
+          <Col className="gutter-row" md={8} sm={24} xs={24}>
             <Donut
               {...{ angleField: 'SumML', colorField: 'groupsLabel', label1: { style: { color: '#000000' }, type: 'spider', content: '{name}\n{percentage}' }, legend: false, label2: false }}
               title={formValues.DepartmentList?.label}
               dataSource={operator.map((row) => ({ ...row, SumML: row.yearML }))}
             />
           </Col>
-          <Col className="gutter-row" md={16}>
+          <Col className="gutter-row" md={16} sm={24} xs={24}>
             <LineWithKPI dataSource={yearData} showKPI={true} {...lineConfig} {...{ legend: false }} />
           </Col>
           <Col className="gutter-row" md={24}>
-            <Space gutter={16} size={'large'}>
-              <h2>顾问业绩走势</h2>
-              <Select
-                labelInValue
-                mode={'multiple'}
-                style={{ width: '400px' }}
-                placeholder={'选择顾问'}
-                onChange={sale_store.setPickSales}
-                value={sale_store.salesTrade.pickSales}
-                maxTagCount={1}
-                maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
-                allowClear={true}
-              >
-                {operatorObjects.map((ele) => (
-                  <Select.Option key={ele.key} value={ele.value}>
-                    {ele.label}
-                  </Select.Option>
-                ))}
-              </Select>
-            </Space>
+          <Row gutter={16}>
+              <Col flex={'12em'}><h2>顾问业绩走势</h2></Col>
+              <Col flex={'auto'}>
+                <Select
+                  labelInValue
+                  mode={'multiple'}
+                  style={{ width: '100%' }}
+                  placeholder={'选择顾问'}
+                  onChange={sale_store.setPickSales}
+                  value={sale_store.salesTrade.pickSales}
+                  maxTagCount={1}
+                  maxTagPlaceholder={(omittedValues) => ` + ${omittedValues.length} 更多...`}
+                  allowClear={true}
+                >
+                  {operatorObjects.map((ele) => (
+                    <Select.Option key={ele.key} value={ele.value}>
+                      {ele.label}
+                    </Select.Option>
+                  ))}
+                </Select>
+              </Col>
+            </Row>
           </Col>
           <Col className="gutter-row" md={24}>
             <LineWithKPI dataSource={sale_store.salesTrade.pickSalesData} showKPI={true} {...lineConfig} />