分享链接生成错误bug/增加数据链接卡片宽度/echarts图形media调整

src/components/dashboard/list.jsx

@@ -441,7 +441,7 @@ class DashboardList extends React.Component {
                         return dispatch({ type: 'dashboard/getShareKey', record: this.state.selectedRecord, delay: delay })
                         .then((key) => {
                             this.setState({
-                                shareUrl: window.location.origin + '/#/dashboard/share_key/' + key
+                                shareUrl: window.location.origin + window.location.pathname + '/#/dashboard/share_key/' + key
                             })
                             
                         })

src/components/dataConnect/list.jsx

@@ -39,7 +39,7 @@ class DataConnect extends React.Component {
         const parent = cardBody.parentNode; // 父级容器
         const pWidth = parent.offsetWidth; // 父级容器宽度
         const pPadding = 10 + 10; // 父级容器左右padding
-        const cWidth = 160; // 每个卡片宽度
+        const cWidth = 180; // 每个卡片宽度
         const cMargin = 8 + 8; // 每个卡片左右margin
         const pTrueWidth = pWidth - pPadding; // 父容器实际可用宽度
         const cTrueWidth = cWidth + cMargin; // 卡片实际占用宽度

src/components/dataConnect/list.less

@@ -36,7 +36,7 @@
                     content: none;
                 }
                 .dataconnect-card {
-                    width: 160px;
+                    width: 180px;
                     height: 160px;
                     padding: 0;
                     margin: 8px;

src/components/dataSourceDetail/dataConnectBox.jsx

@@ -320,7 +320,7 @@ class DataConnectBox extends React.Component {
                         <Col span={4}>
                             <FormItem>
                                 <Button
-                                    style={{ width: '90px', float: 'right', 'margin-top': '4px' }}
+                                    style={{ width: '90px', float: 'right', 'marginTop': '4px' }}
                                     disabled={dataConnect.newOne.validating || dataConnect.newOne.saving}
                                     onClick={() => {
                                         this.validAll();

src/components/dataSourceDetail/dataConnectConfig.jsx

@@ -23,7 +23,33 @@ class DataConnectConfig extends React.Component {
     
     componentDidMount() {
         const { dispatch } = this.props;
+        this.setCardBodyWidth();
         dispatch({ type: 'dataConnect/fetchList' });
+        window.addEventListener('resize', this.setCardBodyWidth);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.setCardBodyWidth)
+    }
+
+    /**
+     * 设置卡片容器宽度 = 每行最大卡片数量 * 卡片宽度
+     */
+    setCardBodyWidth = () => {
+        const cardBody = this.cardBodyRef; // 卡片容器
+        const parent = cardBody.parentNode; // 父级容器
+        const pWidth = parent.offsetWidth; // 父级容器宽度
+        const cWidth = 180; // 每个卡片宽度
+        const cMargin = 8 + 8; // 每个卡片左右margin
+        const cTrueWidth = cWidth + cMargin; // 卡片实际占用宽度
+        const count = Math.floor(pWidth/cTrueWidth); // 每行最大卡片数量
+        const cardBodyWidth = (count - 1) * cTrueWidth; // 可能有滚动条，减少一个
+
+        // 这里操作的是parent的左右padding
+        let pTruePadding = (pWidth - cardBodyWidth - 20) / 2;
+
+        parent.style.paddingLeft = parent.style.paddingRight = pTruePadding + 'px';
+
     }
 
     generateCard() {
@@ -205,7 +231,7 @@ class DataConnectConfig extends React.Component {
                                         />
                                     </Row>
                                 }>
-                                    <div className='dataconnect-list'>
+                                    <div className='dataconnect-list' ref={node => this.cardBodyRef = node}>
                                         { this.generateCard() }
                                     </div>
                                     <DataConnectBox />

src/components/dataSourceDetail/dataConnectConfig.less

@@ -23,7 +23,7 @@
                     padding: 16px;
                     .dataconnect-list {
                         .dataconnect-card {
-                            width: 160px;
+                            width: 180px;
                             height: 160px;
                             padding: 0;
                             margin: 8px;

src/models/EChartsMedia.js

@@ -17,7 +17,7 @@ export default function(chartType, legendVisible, dataZoomVisible, assignConfig)
             option: deepAssign({ legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', height: '80%', width: '35%' }, grid: { right: '20%'} }, assignConfig)
         }, {
             query: { maxWidth: 1000, minHeight: 1000 }, // H
-            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }, assignConfig) :
+            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, grid: { bottom: 100 } }, assignConfig) :
                 deepAssign({ legend: { type: 'scroll', right: 'center', top: 50, orient: 'horizontal', width: '90%' }, }, assignConfig)
         }, {
             query: { maxWidth: 500, minHeight: 1000 }, // G
@@ -28,18 +28,18 @@ export default function(chartType, legendVisible, dataZoomVisible, assignConfig)
             option: deepAssign({ legend: { type: 'scroll', top: 50, right: 50, orient: 'vertical', height: '80%', width: '35%' }, grid: { right: '16%' } }, assignConfig)
         }, {
             query: { maxWidth: 1000, maxHeight: 1000 }, // E
-            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, }, assignConfig) :
+            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 50, orient: 'horizontal', width: '90%' }, grid: { bottom: 100 } }, assignConfig) :
                 deepAssign({ legend: { type: 'scroll', right: 'center', top: 50, orient: 'horizontal', width: '90%' }, grid: { top: 100 } }, assignConfig)
         }, {
             query: { maxWidth: 500, maxHeight: 1000 }, // D
-            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, }, assignConfig) :
+            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { bottom: 50 } }, assignConfig) :
                 deepAssign({ legend: { type: 'scroll', right: 'center', top: 0, orient: 'horizontal', width: '90%' }, }, assignConfig)
         }, {
             query: { minWidth: 1000, maxHeight: 500 }, // C
             option: deepAssign({ legend: {  type: 'scroll', top: 50, right: 50, orient: 'vertical', height: '80%', width: '35%' }, grid: { right: '20%'} }, assignConfig)
         }, {
             query: { maxWidth: 1000, maxHeight: 500 }, // B
-            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 50, left: 80, right: 80 } }, assignConfig) :
+            option: !dataZoomVisible ? deepAssign({ legend: { type: 'scroll', right: 'center', bottom: 0, orient: 'horizontal', width: '90%' }, grid: { top: 50, left: 80, right: 80, bottom: 50 } }, assignConfig) :
                 deepAssign({ legend: { type: 'scroll', right: 'center', top: 20, orient: 'horizontal', width: '90%' }, grid: { top: 80, left: 80, right: 80 } }, assignConfig)
         }, {
             query: { maxWidth: 500, maxHeight: 500 }, // A