index.js

import classNames from 'classnames';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { imgMap } from '../imgImport';
import styles from './index.less';

const XinyuanVillagePage = props => {
  const ref = useRef(null);
  const { integrationData, onLink, loginAction } = props;

  const list1 = [
    {
      label: '生产监控',
    },
    {
      label: '泵站监控',
    },
    {
      label: '水池监控',
    },
    {
      label: '水质管理',
    },
    {
      label: '仪器校准',
    },
    {
      label: '水厂维修',
    },
    {
      label: '扫码巡检',
    },
    {
      label: '设备维修',
    },
  ];
  const list2 = [
    {
      label: '管网监控',
    },
    {
      label: '管网GIS',
    },
    {
      label: '管网采集',
    },
    {
      label: '管网维修',
    },
    {
      label: '管网巡检',
    },
  ];
  const list3 = [
    {
      label: '营业收费',
    },
    {
      label: '统一集抄',
    },
    {
      label: '公众服务',
    },
    {
      label: '报装管理',
    },
  ];
  const list4 = [
    {
      label: '党员发展',
    },
    {
      label: '党政要闻',
    },
    {
      label: '知识库',
    },
    {
      label: '培训考试',
    },
  ];
  const list5 = [
    {
      label: '物联接入',
    },
    {
      label: '平台接入',
    },
    {
      label: '视频接入',
    },
    {
      label: '门禁接入',
    },
  ];
  useEffect(() => () => {}, []);

  return (
    <div className={classNames(styles.xinyuanVillagePage, 'xinyuanVillagePage')} ref={ref}>
      <div className={styles.integration_content} style={{}}>
        <div className={classNames(styles.integration_row1)}>
          <div className={classNames(styles.integration_row1_col1)}>
            <img src={imgMap['运营中心']} alt="运营中心" />
          </div>
          <div
            className={classNames(
              styles.integration_row1_col2,
              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
            )}
            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
          >
            <img style={{ paddingTop: '1px' }} src={imgMap['运营总览']} alt="运营总览" />
          </div>
          <div
            className={classNames(
              styles.integration_row1_col2,
              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
            )}
            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
          >
            <img src={imgMap['水厂总览']} alt="水厂总览" />
          </div>
          <div
            className={classNames(
              styles.integration_row1_col2,
              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
            )}
            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
          >
            <img style={{ paddingTop: '4px' }} src={imgMap['生产运营分析']} alt="生产运营分析" />
          </div>
          <div
            className={classNames(
              styles.integration_row1_col2,
              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
            )}
            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
          >
            <img style={{ paddingTop: '9px' }} src={imgMap['综合业务考核']} alt="综合业务考核" />
          </div>
        </div>
        <div className={styles.integration_row2}>
          <div className={classNames(styles.integration_col1)}>
            <div className={styles.integration_col1_title}>厂站管理</div>
            <div className={styles.integration_col1_list}>
              {list1.map((item, index) => (
                <div
                  className={classNames(
                    styles.integration_col1_list_item,
                    integrationData['中西部乡镇厂站管理']
                      ? styles.integration_row_col_link
                      : styles.integration_row_col_no,
                  )}
                  key={item.label}
                  onClick={() => onLink(integrationData['中西部乡镇厂站管理'], loginAction)}
                >
                  <img src={imgMap[item.label]} alt={item.label} />
                  <div className={styles.integration_col1_list_item_label}>{item.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className={classNames(styles.integration_col2)}>
            <div className={styles.integration_col2_title}>管网运维</div>
            <div className={styles.integration_col2_list}>
              {list2.map((item, index) => (
                <div
                  className={classNames(
                    styles.integration_col2_list_item,
                    integrationData['中西部乡镇管网运维']
                      ? styles.integration_row_col_link
                      : styles.integration_row_col_no,
                  )}
                  key={item.label}
                  name={item.label}
                  onClick={() => onLink(integrationData['中西部乡镇管网运维'], loginAction)}
                >
                  <img src={imgMap[item.label]} alt={item.label} />
                  <div className={styles.integration_col2_list_item_label}>{item.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className={classNames(styles.integration_col3)}>
            <div className={styles.integration_col3_title}>业务中心</div>
            <div className={styles.integration_col3_list}>
              {list3.map((item, index) => (
                <div
                  className={classNames(
                    styles.integration_col3_list_item,
                    item.label !== '报装管理' && integrationData.XZYS
                      ? styles.integration_row_col_link
                      : styles.integration_row_col_no,
                  )}
                  key={item.label}
                  name={item.label}
                  onClick={() => item.label !== '报装管理' && onLink(integrationData.XZYS, loginAction)}
                >
                  <img src={imgMap[item.label]} alt={item.label} />
                  <div className={styles.integration_col3_list_item_label}>{item.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className={classNames(styles.integration_col4)}>
            <div className={styles.integration_col4_title}>党建管理</div>
            <div className={styles.integration_col4_list}>
              {list4.map((item, index) => (
                <div
                  className={classNames(
                    styles.integration_col4_list_item,
                    integrationData['中西部乡镇党建管理']
                      ? styles.integration_row_col_link
                      : styles.integration_row_col_no,
                  )}
                  key={item.label}
                  name={item.label}
                  onClick={() => onLink(integrationData['中西部乡镇党建管理'], loginAction)}
                >
                  <img src={imgMap[item.label]} alt={item.label} />
                  <div className={styles.integration_col4_list_item_label}>{item.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        {list5.map((item, index) => (
          <div
            className={classNames(
              styles.integration_col5_list_item,
              integrationData['中西部乡镇支撑平台'] ? styles.integration_row_col_link : styles.integration_row_col_no,
            )}
            key={item.label}
            name={item.label}
            onClick={() => onLink(integrationData['中西部乡镇支撑平台'], loginAction)}
          >
            <div className={styles.integration_col5_list_item_label}>{item.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default XinyuanVillagePage;