TaxBackApp/page/homePage/home_page.js

import React, {Component} from 'react';
import {
  Image,
  TouchableOpacity,
  ScrollView,
  Text,
  View,
  DeviceEventEmitter,
} from 'react-native';
import NetInfo from '@react-native-community/netinfo';

import {GetDataPost} from '../../data/encryption';
import {IndividualStorageData, RetrieveData} from '../../data/storage';
import {ShowToast} from '../../components/rootToast/root_toast';
import Swiper from 'react-native-swiper';
import {NoticeBar, WhiteSpace} from '@ant-design/react-native';
import home_css from './home_css';
import moment from 'moment';

export default class home_page extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      info: '',
      totalAmt: 0.0,
      totalTaxes: 0.0,
      sumNum: 0.0,
      authority: '',
      landingStatus: 0, //登陆状态，0：表示未登陆,1：表示已登陆
      curCompany: '首页',
      userType: 2,
      online: 0, //网络链接，0：表示网络链接失败，1：表示网络链接正常
      onlineEntNum: 0, //在线企业数
      allEntNum: 0, //所有企业数
      serverNum: 0, //服务器数量
      shelvesEntNum: 0, //月新增上架企业数
      invoicedQuantity: 0, //月累计开票数量
      invoicedAmount: 0.0, //月累计开票金额
      onlineServiceProviderNum: 0, //服务商在线数量
      allServiceProviderNum: 0, //服务商总数
      serverOnlineEntNum: 0, //在线企业数
      serverAllEntNum: 0, //所有企业数
      onlinePersonnelNum: 0, //在线人员数量
      allRegisterPersonnelNum: 0, //总注册人数
    };
    this.fetchDefaultEnt();
  }

  render() {
    return (
      <View>
        <ScrollView style={home_css.homePageBak}>
          <View style={home_css.topImgBak}>
            <Swiper style={home_css.wrapper} showsButtons={false} autoplay={true}>
              <View style={home_css.slide1}>
                <Text style={home_css.text}>Hello Swiper</Text>
              </View>
              <View style={home_css.slide2}>
                <Text style={home_css.text}>Beautiful</Text>
              </View>
              <View style={home_css.slide3}>
                <Text style={home_css.text}>And simple</Text>
              </View>
            </Swiper>
          </View>
          <View>
            <NoticeBar
              onPress={() => alert('click')}
              marqueeProps={{loop: true, style: {fontSize: 12, color: 'red'}}}>
              Notice: The arrival time of incomes and transfers of Yu 'E Bao
              will be delayed during National Day.
            </NoticeBar>
          </View>
          <View style={home_css.taxItemBak}>
            <View style={home_css.tapBtnBak}>
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:entInfo:preInit') ? (
                  <TouchableOpacity
                    style={home_css.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(1);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/taxManagement.png')}
                      style={home_css.tapBtnImg}
                    />
                    <Text style={home_css.tapBtnTips}>企业上架</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(1);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/taxManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>企业上架</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(2);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/productManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>人员管理</Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(2);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/productManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>人员管理</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(3);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>操作审计</Text>
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(3);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>操作审计</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:entInfo:pageByMachineId') ? (
                  <TouchableOpacity
                    style={home_css.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(4);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/userManagement.png')}
                      style={home_css.tapBtnImg}
                    />
                    <Text style={home_css.tapBtnTips}>企业列表</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(4);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>企业列表</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:invoice:view') ? (
                  <TouchableOpacity
                    style={home_css.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(6);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/userManagement.png')}
                      style={home_css.tapBtnImg}
                    />
                    <Text style={home_css.tapBtnTips}>开票列表</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(6);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>开票列表</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('sys:hongchong:view') ? (
                  <TouchableOpacity
                    style={home_css.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(8);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/userManagement.png')}
                      style={home_css.tapBtnImg}
                    />
                    <Text style={home_css.tapBtnTips}>红冲列表</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(8);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>红冲列表</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('isp:machineInfo:view') ? (
                  <TouchableOpacity
                    style={home_css.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(5);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/userManagement.png')}
                      style={home_css.tapBtnImg}
                    />
                    <Text style={home_css.tapBtnTips}>服务器列表</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(5);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>服务器列表</Text>
                </TouchableOpacity>
              )}
              {this.state.landingStatus === 1 ? (
                this.state.authority.includes('isp:info:list:view') ? (
                  <TouchableOpacity
                    style={home_css.tapBtnBakCol}
                    onPress={() => {
                      this.getLandingStatus(7);
                    }}>
                    <Image
                      source={require('../../source/img/homeImg/userManagement.png')}
                      style={home_css.tapBtnImg}
                    />
                    <Text style={home_css.tapBtnTips}>服务商列表</Text>
                  </TouchableOpacity>
                ) : (
                  <TouchableOpacity />
                )
              ) : (
                <TouchableOpacity
                  style={home_css.tapBtnBakCol}
                  onPress={() => {
                    this.getLandingStatus(7);
                  }}>
                  <Image
                    source={require('../../source/img/homeImg/userManagement.png')}
                    style={home_css.tapBtnImg}
                  />
                  <Text style={home_css.tapBtnTips}>服务商列表</Text>
                </TouchableOpacity>
              )}
              {/*<TouchableOpacity*/}
              {/*  style={home_css.tapBtnBakCol}*/}
              {/*  onPress={() => {*/}
              {/*    this.getLandingStatus(15);*/}
              {/*  }}>*/}
              {/*  <Image*/}
              {/*    source={require('../../source/img/homeImg/userManagement.png')}*/}
              {/*    style={home_css.tapBtnImg}*/}
              {/*  />*/}
              {/*  <Text style={home_css.tapBtnTips}>测试</Text>*/}
              {/*</TouchableOpacity>*/}
            </View>
          </View>
          {this.state.userType == 2 ? (
            <View>
              <View style={home_css.yxTopicBak}>
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.onlineEntNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>在线企业数</Text>
                  </TouchableOpacity>
                </View>
                <View style={home_css.statisticsView} />
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.allEntNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>所有企业数</Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={home_css.yxTopicBak}>
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.serverNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>服务器数量</Text>
                  </TouchableOpacity>
                </View>
                <View style={home_css.statisticsView} />
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.shelvesEntNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>
                      月新增上架企业数
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={home_css.yxTopicBak}>
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.invoicedQuantity}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>
                      月累计开票数量
                    </Text>
                  </TouchableOpacity>
                </View>
                <View style={home_css.statisticsView} />
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.invoicedAmount}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>
                      月累计开票金额
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          ) : (
            <View />
          )}
          {this.state.userType == 3 ? (
            <View>
              <View style={home_css.yxTopicBak}>
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.onlineServiceProviderNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>
                      服务商在线数量
                    </Text>
                  </TouchableOpacity>
                </View>
                <View style={home_css.statisticsView} />
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.allServiceProviderNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>服务商总数</Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={home_css.yxTopicBak}>
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.serverOnlineEntNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>企业在线数量</Text>
                  </TouchableOpacity>
                </View>
                <View style={home_css.statisticsView} />
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.serverAllEntNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>企业总数</Text>
                  </TouchableOpacity>
                </View>
              </View>
              <View style={home_css.yxTopicBak}>
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.onlinePersonnelNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>在线人员数量</Text>
                  </TouchableOpacity>
                </View>
                <View style={home_css.statisticsView} />
                <View style={home_css.yxTopicBottom}>
                  <TouchableOpacity style={[home_css.yxTopicItem]}>
                    <Text style={home_css.yxTopicItemTextC}>
                      {this.state.allRegisterPersonnelNum}
                    </Text>
                    <Text style={home_css.yxTopicItemTextA}>总注册人数</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          ) : (
            <View />
          )}
          <View style={home_css.yxTopicBak}>
            {this.state.online == 1 ? (
              <View style={home_css.yxTopicBottom}>
                <TouchableOpacity
                  style={{
                    width: 140,
                    height: 50,
                    margin: 10,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}>
                    <Text
                      style={[home_css.yxTopicItemTextA, {marginRight: 10}]}>
                      网络
                    </Text>
                    <Text style={{color: '#72C040'}}>已连接</Text>
                    <Image
                      source={require('../../source/img/online/success.png')}
                      style={{
                        width: 30,
                        height: 30,
                        margin: 5,
                        borderRadius: 50,
                      }}
                    />
                  </View>
                </TouchableOpacity>
              </View>
            ) : (
              <View style={home_css.yxTopicBottom}>
                <TouchableOpacity
                  style={{
                    width: 140,
                    height: 50,
                    margin: 10,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}>
                  <View
                    style={{
                      flexDirection: 'row',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                    }}>
                    <Text
                      style={[home_css.yxTopicItemTextA, {marginRight: 10}]}>
                      网络
                    </Text>
                    <Text style={{color: '#D75054'}}>未连接</Text>
                    <Image
                      source={require('../../source/img/online/fail.png')}
                      style={{
                        width: 30,
                        height: 30,
                        margin: 5,
                        borderRadius: 50,
                      }}
                    />
                  </View>
                </TouchableOpacity>
              </View>
            )}
            <View style={home_css.statisticsView} />
            <View style={home_css.yxTopicBottom}>
              <TouchableOpacity
                style={{
                  width: 140,
                  height: 50,
                  margin: 10,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  }}>
                  <Text style={[home_css.yxTopicItemTextA, {marginRight: 10}]}>
                    税控
                  </Text>
                  <Text style={{color: '#D75054'}}>未连接</Text>
                  <Image
                    source={require('../../source/img/online/fail.png')}
                    style={{
                      width: 30,
                      height: 30,
                      margin: 5,
                      borderRadius: 50,
                    }}
                  />
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }

  componentDidMount() {
    console.disableYellowBox = true;
    NetInfo.fetch().done((status) => {
      if (status.type != 'none') {
        this.setState({
          online: 1,
        });
      }
    });
    this.setLoginType();
    this.getAuthority();
    this.getHomeData();
    // 收到监听
    this.listener = DeviceEventEmitter.addListener(
      'updateCurMon',
      (message) => {
        // 收到监听后想做的事情 // 监听
        this.fetchDefaultEnt();
      },
    );
  }

  componentWillUnmount() {
    // 移除监听
    if (this.listener) {
      this.listener.remove();
    }
    this.setState = (state, callback) => {
      return;
    };
  }

  //根据登陆帐号获取帐号类型
  setLoginType = async () => {
    let userType = await RetrieveData('usertype');
    userType = userType.substring(1, userType.length - 1);
    this.setState({
      userType: userType,
    });
  };

  //获取当前默认绑定企业
  fetchDefaultEnt = async () => {
    //const  defaultFirm =await RetrieveData('defaultEnt');
    //console.log( "default ent:" + JSON.stringify(defaultFirm));
    //console.log( "default ent:");
    const res = await RetrieveData('token');
    const account = await RetrieveData('account');
    if (res && account) {
      let token = res.substring(1, res.length - 1);
      let mobile = account.substring(1, account.length - 1);
      const url = 'https://app.taxbk.cn:9443/auth/comm/user/findDefaultChoose';
      let response = await GetDataPost(
        url,
        token,
        {
          mobile: mobile,
        },
        false,
        2,
      );
      if (response.code != 0) {
        ShowToast(response.msg);
      } else {
        this.setState({curCompany: response.data.entName});
        //console.log("当前默认绑定企业: "+JSON.stringify(response.data));
        await IndividualStorageData(
          'defaultEnt',
          JSON.stringify(response.data),
        );
        // await this.getKPStatsMonth(response.data.entTaxId);
        this.props.navigation.setOptions({
          headerTitleAlign: 'center',
          headerTitle: (props) => {
            return (
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text style={{color: '#fff', fontSize: 16, fontWeight: '700'}}>
                  {this.state.curCompany ? this.state.curCompany : '首页'}
                </Text>
                <TouchableOpacity
                  onPress={async () => {
                    const res = await RetrieveData('token');
                    const account = await RetrieveData('account');
                    if (res && account) {
                      this.props.navigation.navigate('enterprise_list');
                    } else {
                      ShowToast('请先登录');
                    }
                  }}>
                  {/*<Image*/}
                  {/*  source={require('../../source/img/homeImg/change.png')}*/}
                  {/*  style={{marginLeft: 5, width: 14, height: 14}}*/}
                  {/*/>*/}
                </TouchableOpacity>
              </View>
            );
          },
          headerStyle: {backgroundColor: '#00A2FE', borderWidth: 0},
        });
      }
    } else {
      this.setState({
        sumNum: 0.0,
        totalAmt: 0.0,
        totalTaxes: 0.0,
        curCompany: '首页',
      });
      this.props.navigation.setOptions({
        headerTitle: (props) => {
          //console.log("==="+ this.state.curCompany);
          return (
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'flex-end',
              }}>
              <Text style={{color: '#fff', fontSize: 20, fontWeight: '600'}}>
                {this.state.curCompany ? this.state.curCompany : '首页'}
              </Text>
            </View>
          );
        },
        headerTintColor: '#fff',
      });
    }
  };

  //判断是否登陆
  getLandingStatus = async (type) => {
    const account = await RetrieveData('account');
    if (account) {
      this.setState({
        landingStatus: 1,
      });
      if (type == 1) {
        this.props.navigation.navigate('enterprise_shelves');
      }
      if (type == 2) {
        this.props.navigation.navigate('personnel_list');
      }
      if (type == 3) {
        this.props.navigation.navigate('operation_audit_list');
      }
      if (type == 4) {
        this.props.navigation.navigate('enterprise_information');
      }
      if (type == 5) {
        this.props.navigation.navigate('server_list');
      }
      if (type == 6) {
        this.props.navigation.navigate('invoice_inquiry');
      }
      if (type == 7) {
        this.props.navigation.navigate('service_provider_list');
      }
      if (type == 8) {
        this.props.navigation.navigate('invoice_inquiry_red_rush');
      }
      if (type == 15) {
        this.props.navigation.navigate('Test');
      }
    } else {
      this.setState({
        landingStatus: 0,
      });
      this.props.navigation.navigate('login_head');
    }
  };

  //获取权限信息
  getAuthority = async () => {
    const authority = await RetrieveData('authority');
    if (authority) {
      this.setState({
        authority: authority,
        landingStatus: 1,
      });
    }
  };

  //获取首页数据
  getHomeData = async () => {
    let account = await RetrieveData('account');
    let token = await RetrieveData('token');
    if (token && account) {
      account = account.substring(1, account.length - 1);
      token = token.substring(1, token.length - 1);
      const url = 'https://app.taxbk.cn:9443/sys/stat/home';
      GetDataPost(
        url,
        token,
        {
          mobile: account,
        },
        false,
        2,
      ).then((res) => {
        this.setState({
          onlineEntNum: res.data.onlineEntCnt,
          allEntNum: res.data.entCnt,
          shelvesEntNum: res.data.newInitEntCnt,
          invoicedAmount: res.data.monthInvoiceAmt,
          serverNum: res.data.machineCnt,
          invoicedQuantity: res.data.monthInvoiceCnt,
          serverOnlineEntNum: res.data.onlineEntCnt,
          serverAllEntNum: res.data.entCnt,
          allRegisterPersonnelNum: res.data.userCnt,
          allServiceProviderNum: res.data.ispCnt,
          onlinePersonnelNum: res.data.onlineUserCnt,
          onlineServiceProviderNum: res.data.onlineIspCnt,
        });
      });
    }
  };
}