uas手机版

  数据看板无数据是展示引导

uas-office-web/uas-mobile/src/components/private/kanban/KanBan.jsx

@@ -11,6 +11,10 @@ import { fetchGet } from '../../../utils/common/fetchRequest'
 import { saveChartState } from '../../../redux/actions/chartState'
 import { API } from '../../../configs/api.config'
 import { message } from 'antd'
+import {
+  FolderOpenOutlined,
+} from '@ant-design/icons'
+import './kanban.less'
 
 class KanBan extends Component {
 
@@ -42,6 +46,11 @@ class KanBan extends Component {
         )
       }
     })
+    if (subsData.length == 0) {
+      chartItem.push(
+        this.getNoneElement(),
+      )
+    }
 
     return (
       <>
@@ -65,6 +74,23 @@ class KanBan extends Component {
     })
   }
 
+  getNoneElement = () => {
+    return (
+      <div className="kanban-panel-nodata" key='nodata'>
+        <div className="nodata-box">
+          <FolderOpenOutlined
+            style={{ fontSize: '50px', color: '#DCDCDC' }}
+          />
+          <p>暂无数据，<span onClick={this.addChart} className="addchart">立即添加</span></p>
+        </div>
+      </div>
+    )
+  }
+
+  addChart = () => {
+    this.props.KanbanManage()
+  }
+
 }
 
 let mapStateToProps = (state) => ({

uas-office-web/uas-mobile/src/components/private/kanban/kanban.less

@@ -0,0 +1,28 @@
+.kanban-panel-nodata {
+  background: #fff;
+  width: 100%;
+  min-height: 30vh;
+  padding: 8px;
+  position: relative;
+
+  .nodata-box {
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    transform: translate(-50%);
+
+    .anticon-folder-open {
+      display: block;
+      text-align: center;
+      margin-bottom: 6px;
+    }
+
+    p {
+      color: #C0C0C0;
+
+      .addchart {
+        color: #47a3ff;
+      }
+    }
+  }
+}

uas-office-web/uas-mobile/src/pages/private/homePage/MainRoot.jsx

@@ -70,7 +70,7 @@ class MainRoot extends Component {
             }}
             rightIcon='uas-edit'
             onRightClick={this.onKanbanManage}/>
-          <KanBan/>
+          <KanBan KanbanManage={this.onKanbanManage}/>
         </div>
       </div>
     )