提交

src/pages/Welcome.jsx

@@ -11,8 +11,11 @@ const welcome = (props) => {
 
   const [data, setData] = useState([])
 
+  const [checkData, setCheckData] = useState([])
+
   useEffect(() => {
     getIndexEcharts()
+    getBuildingReports()
   }, [])
 
   function getIndexEcharts(params) {
@@ -24,35 +27,48 @@ const welcome = (props) => {
       console.log(data, '11111')
     })
   }
+
+  function getBuildingReports() {
+    request({ ...apis.system.taBuildingReports, }).then((data) => {
+      setCheckData((data.records || []).map((x) => x.reportCode))
+    })
+  }
+
   return (
     <>
       <div style={{ display: 'flex', marginBottom: '33px' }}>
-        <div style={{
-          textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(241,43,62,1) 0%,rgba(254,144,155,1) 100%)', height: '100px',
-          boxShadow: '0px  0.106rem 14px -15px rgba(241,43,62,1)',
-          borderRadius: '12px', width: '32%', marginRight: '2%'
-        }}>
-          <span style={{ fontSize: '24px', color: '#fff' }}>总用户 </span>
-          <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.selectUserCount || '0'}</span>
-        </div>
-        <div style={{
-          textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(255,126,74,1) 0%,rgba(255,196,168,1) 100%)', height: '100px',
-          boxShadow: '0px  0.106rem 14px -15px rgba(255,126,74,1)',
-          borderRadius: '12px', width: '32%', marginRight: '2%'
-        }}>
-          <span style={{ fontSize: '24px', color: '#fff' }}>总注册用户 </span>
-          <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{(data.selectRegisteredCount && data.selectRegisteredCount + 95) || '0'}</span>
-        </div>
-        <div onClick={() => router.push('/indexEcharts/newUsers')} style={{
-          textAlign: 'center', display: 'flex', justifyContent: 'center', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
-          boxShadow: '0px  0.106rem 14px -15px rgba(107,130,230,1)',
-          borderRadius: '12px', width: '32%',
-        }}>
-          <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0',cursor: 'pointer' }}>最近7天新增 </span>
-          <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>{data.selectRecentlyCount || '0'}</span>
-        </div>
+        {checkData.includes('total_number_of_users') &&
+          <div style={{
+            textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(241,43,62,1) 0%,rgba(254,144,155,1) 100%)', height: '100px',
+            boxShadow: '0px  0.106rem 14px -15px rgba(241,43,62,1)',
+            borderRadius: '12px', width: '32%', marginRight: '2%'
+          }}>
+            <span style={{ fontSize: '24px', color: '#fff' }}>总用户 </span>
+            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{data.selectUserCount || '0'}</span>
+          </div>
+        }
+        {checkData.includes('total_number_of_registered_users') &&
+          <div style={{
+            textAlign: 'center', display: 'flex', justifyContent: 'center', lineHeight: '100px', background: 'linear-gradient(144deg,rgba(255,126,74,1) 0%,rgba(255,196,168,1) 100%)', height: '100px',
+            boxShadow: '0px  0.106rem 14px -15px rgba(255,126,74,1)',
+            borderRadius: '12px', width: '32%', marginRight: '2%'
+          }}>
+            <span style={{ fontSize: '24px', color: '#fff' }}>总注册用户 </span>
+            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy' }}>{(data.selectRegisteredCount && data.selectRegisteredCount + 95) || '0'}</span>
+          </div>
+        }
+        {checkData.includes('number_of_new_users') &&
+          <div onClick={() => router.push('/indexEcharts/newUsers')} style={{
+            textAlign: 'center', display: 'flex', justifyContent: 'center', background: 'linear-gradient(137deg,rgba(107,130,230,1) 0%,rgba(152,175,251,1) 100%)', height: '100px',
+            boxShadow: '0px  0.106rem 14px -15px rgba(107,130,230,1)',
+            borderRadius: '12px', width: '32%',
+          }}>
+            <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0',cursor: 'pointer' }}>最近7天新增 </span>
+            <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>{data.selectRecentlyCount || '0'}</span>
+          </div>
+        }
       </div>
-      <IndexEcharts style={{ width: '100%' }} onReData={(e) => redata(e)} ></IndexEcharts>
+      <IndexEcharts style={{ width: '100%' }} onReData={(e) => redata(e)} checkData={checkData}></IndexEcharts>
     </>
   )
 

src/pages/indexEcharts/index.jsx

@@ -15,11 +15,19 @@ import IntentionalCustomers from './components/IntentionalCustomers'
 import styles from './styles.less'
 import moment from 'moment';
 import CityNums from '../charts/CityNums';
-const indexEcharts = (props) => {
+const indexEcharts = props => {
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [checkData, setCheckData] = useState([])
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setCheckData(props.checkData)
+  }, [props.checkData]);
 
   const endDate = new Date()
 
-  //为了观察数据先设30天
+  // 为了观察数据先设30天
   const startDate = moment().subtract(7, 'day').toDate()
 
   function onTabledatas (e) {
@@ -29,37 +37,54 @@ const indexEcharts = (props) => {
   return (
 
     <>
-      <div style={{ display: 'flex',width:'100%' }}>
-        <div className={styles.bar}>
-          <UserSource endDate={endDate}  startDate={startDate} onSuccess={(e) => onTabledatas(e)}></UserSource>
+      <div style={{ display: 'flex', width: '100%' }}>
+        {checkData.includes('user_source') &&
+          <div className={styles.bar}>
+            <UserSource endDate={endDate} startDate={startDate} onSuccess={e => onTabledatas(e)}></UserSource>
+          </div>
+        }
+        {checkData.includes('user_source') &&
+          <div className={styles.pie}>
+            <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
+          </div>
+        }
+      </div>
+      {checkData.includes('urban_distribution') &&
+        <div>
+          <CityNums></CityNums>
         </div>
-        <div className={styles.pie}>
-          <UserSourcepie endDate={endDate} startDate={startDate}></UserSourcepie>
+      }
+      {checkData.includes('user_behavior') &&
+        <div className={styles.behavior}>
+          <UserBehavior tableShow={false} endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
         </div>
-      </div>
-      <div>
-      <CityNums></CityNums>
-      </div>
-      <div className={styles.behavior}>
-        <UserBehavior tableShow={false} endDate={endDate} startDate={startDate} dataZoom={false}></UserBehavior>
-      </div>
+      }
       <div style={{ display: 'flex' }}>
-        <div className={styles.bar}>
-
-          <UserActive ></UserActive>
-        </div>
-        <div className={styles.pie}><UserSex></UserSex> </div>
+        {checkData.includes('active_users') &&
+          <div className={styles.bar}>
+            <UserActive ></UserActive>
+          </div>
+        }
+        {checkData.includes('sex_ratio') &&
+          <div className={styles.pie}><UserSex></UserSex> </div>
+        }
       </div>
       <div style={{ display: 'flex' }}>
-        <div className={styles.bar}>
-          <NewUsers endDate={endDate} startDate={startDate} dataZoom={false}></NewUsers>
-        </div>
-        <div className={styles.pie}><UserConversion></UserConversion> </div>
+        {checkData.includes('number_of_new_users') &&
+          <div className={styles.bar}>
+            <NewUsers endDate={endDate} startDate={startDate} dataZoom={false}></NewUsers>
+          </div>
+        }
+        {checkData.includes('conversion_rate') &&
+          <div className={styles.pie}><UserConversion></UserConversion> </div>
+        }
       </div >
 
-      <div className={styles.customers}>
-        <IntentionalCustomers></IntentionalCustomers>
-      </div>
+      {checkData.includes('intentional_user') &&
+        <div className={styles.customers}>
+          <IntentionalCustomers></IntentionalCustomers>
+        </div>
+      }
     </>
   )
 }