index.js 8.17 KB
Newer Older
周宏民's avatar
周宏民 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189
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,
190
                    item.label !== '报装管理' && integrationData.XZYS
周宏民's avatar
周宏民 committed
191 192 193 194 195
                      ? styles.integration_row_col_link
                      : styles.integration_row_col_no,
                  )}
                  key={item.label}
                  name={item.label}
196
                  onClick={() => item.label !== '报装管理' && onLink(integrationData.XZYS, loginAction)}
周宏民's avatar
周宏民 committed
197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244
                >
                  <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;