bug修改提交

src/consts/urlConsts.js

@@ -104,6 +104,7 @@ export const FscSerUrl = {
   fetchMonthCountChk: completePrefix(patrolURI, 'api/spc/countMonth'),  //月巡检情况统计
   fetchTaskList: completePrefix(patrolURI, 'api/task/queryTaskByPage'), //月巡检情况统计
   fetchHidDangerCount: completePrefix(patrolURI, 'api/task/hiddenDanger/count'),  //隐患治理统计
+  SpecCheckInputByIdNewUrl: completePrefix(patrolURI,'api/spc/check-input-new'), //根据ID查询巡检记录项
 
   fetchPointDetail: completePrefix(patrolURI, 'api/spc/queryPointById'),//风险点
   fetchPointMeasures: completePrefix(patrolURI, 'api/spc/measures'),//巡检点措施

src/routes/customRoutes.js

@@ -6,6 +6,7 @@ import FireTruckDetailInfo from './../view/bizview/equipmentLedger/FireResources
 import PointInfo from './../view/bizview/pointInfo/index';
 import CheckList from './../view/bizview/xjcheck/CheckList';
 import CheckDetail from './../view/bizview/checkManage/checkDetail';
+import CheckDetailNew from './../view/bizview/checkManage/checkDetail/CheckDetailNew';
 import DifferentiateDetail from './../view/bizview/intelligentDifferentiate/DifferentiateDetail';
 import TextPlan from './../view/planMgmt/view/TextPlan';
 import PlanDrill from './../view/planMgmt/view/PlanDrill';
@@ -24,7 +25,7 @@ export const customRoutes = [
   { path: 'firetruckinfo', parent: 'biz', component: FireTruckDetailInfo },
   { path: 'pointInfo', parent: 'patrolpoint', component: PointInfo },
   { path: 'checklist', parent: 'patrolpoint', component: CheckList },
-  { path: 'checkdetail', parent: 'patrolpoint', component: CheckDetail },
+  { path: 'checkdetail', parent: 'patrolpoint', component: CheckDetailNew },
   { path: 'differentiateDetail', parent: 'biz', component: DifferentiateDetail },
   { path: 'leaderStruct', parent: 'biz', component: LeaderStruct },
   ...parseCusotmRoutes()

src/services/checkService.js

@@ -14,7 +14,9 @@ export const fetchCheckInputById = (data) => {
   const url = `${FscSerUrl.fetchCheckInputById}/`;
   return commonPost(FscSerUrl.fetchCheckInputById, data);
 };
-
+export const fetchCheckInputByIdNew = data => {
+  return commonPost(FscSerUrl.SpecCheckInputByIdNewUrl, data);
+};
 /**
  * 三维地图中各种点详情
  */

src/view/bizview/checkManage/checkDetail/Carousel.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Icon from 'amos-icon';
+
+const margin = 8;
+const barimgWidth = 105;
+const barWidth = barimgWidth + margin;
+const leftRightWidth = 15;
+const leftRightALLWidth = (leftRightWidth * 2) + margin;
+
+class Carousel extends Component {
+
+  static propTypes = {
+    files: PropTypes.array,
+    barLength: PropTypes.number
+  };
+
+  static defaultProps = {
+    files: [],
+    barLength: 3
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeFile: 1,
+      allWidth: 0,
+      fillObjs: []
+    };
+  }
+
+  componentDidMount(){
+    this.onInit();
+  }
+
+  onInit = () => {
+    this.setState({ allWidth: this.node.clientWidth, activeFile: 1 });
+  }
+
+  onClick = (file) => {
+    this.setState({ activeFile: file });
+  }
+
+  onLeftClick = () => {
+    const { files } = this.props;
+    const { activeFile } = this.state;
+    this.setState({ activeFile: (activeFile - 1) > 0 ? activeFile - 1 : files.length });
+  }
+
+  onRightClick = () => {
+    const { files } = this.props;
+    const { activeFile } = this.state;
+    this.setState({ activeFile: (activeFile + 1) <= files.length ? activeFile + 1 : 1 });
+  }
+
+  render() {
+    const { files, barLength } = this.props;
+    const { activeFile, allWidth } = this.state;
+    if (files.length === 1) {
+      return (
+        <div ref={node=> this.node = node} className="carousel-content">
+          <img className="carousel-img" src={files[0]} alt="" />
+        </div>
+      );
+    }
+    let fillObjs = [files[files.length - 1], ...files, files[0]];
+    fillObjs = fillObjs.map((e, index) => {
+      let value = index;
+      if (index === 0) {
+        value = files.length;
+      }
+      if (index === fillObjs.length - 1) {
+        value = 1;
+      }
+      return { key: index, file: e, value };
+    });
+    const carouselBarWidth = files.length < barLength ? barWidth * files.length : barWidth * barLength;
+    const carouselBarAllWidth = barWidth * fillObjs.length;
+    const contentStyle = { height: '500px' };
+    return (
+      <div ref={node=> this.node = node} className="carousel-content" style={contentStyle} >
+        <ul className="carousel-inner" style={{ width: `${allWidth * fillObjs.length}px`, left: -allWidth * activeFile }}>
+          {
+            fillObjs.map(e => (
+              <li key={e.key} style={{ width: `${allWidth}px` }} className="carousel-item">
+                <img className="carousel-img" src={e.file} alt="" />
+              </li>
+            ))
+          }
+        </ul>
+        <div className="carousel-indicators" style={{ left: `calc(50% - ${(carouselBarWidth + leftRightALLWidth) / 2}px)` }}>
+          <div className="carousel-left-bar" onClick={this.onLeftClick} style={{ width: `${leftRightWidth}px`, marginRight: `${margin}px` }}>
+            <Icon icon="left"  />
+          </div>
+          <div className="carousel-center-bar" style={{ width: `${carouselBarWidth}px` }}>
+            <ul className="carousel-bar" style={{ width: `${carouselBarAllWidth}px`, left: -barWidth * (activeFile - 1) }}>
+              {
+                fillObjs.map(e => (
+                  <li
+                    key={e.key}
+                    style={{ width: `${barimgWidth}px`, marginRight: `${margin}px` }}
+                    onClick={()=>this.onClick(e.value)}
+                    className={classnames('carousel-bar-item', { 'active': e.value === activeFile })}
+                  >
+                    <img className="carousel-img" src={e.file} alt="" />
+                  </li>
+                ))
+              }
+            </ul>
+          </div>
+          <div className="carousel-right-bar" onClick={this.onRightClick} >
+            <Icon icon="right" />
+          </div>
+        </div>
+      </div>
+    );
+
+  }
+}
+
+export default Carousel;

src/view/bizview/checkManage/checkDetail/CheckDetailNew.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, Carousel, Button } from 'amos-framework';
+import dt2react from 'dt2react';
+import { browserHistory } from 'amos-react-router/lib';
+import { fetchCheckDetailById, fetchCheckInputByIdNew, fetchShortByCheckIdAndCheckInputId } from './../../../../services/checkService';
+import CheckDetailTable from './CheckDetailTable';
+import CheckInputTable from './CheckInputTable';
+import { XJBaseURI } from './../../../../consts/urlConsts';
+import { tool } from './../../../../utils/processor';
+import Picture from './Picture';
+import { pathMapping } from './../../../../routes/customRoutes';
+import { Table } from 'amos-antd/lib';
+import './cdn.scss';
+
+const CheckListPath = () => pathMapping.checkDetail;
+
+const { renderLongTime } = tool;
+
+const checkDetailHeaderResult = checkDetail => {
+  let checkTime = '巡检时间';
+  let pointName = '巡检点名称';
+  let pointNo = '巡检点编号';
+
+  if (checkDetail) {
+    if (checkDetail.pointName) {
+      checkTime = renderLongTime(checkDetail.checkTime);
+      pointName = checkDetail.pointName;
+      pointNo = checkDetail.pointNo;
+    }
+  }
+  return <div className="">
+    <Button icon={<img src="/src/assets/fsc/img/back.png" alt="" height="28px" />} transparent onClick={() => browserHistory.goBack()} />
+    <span>{` ${checkTime} ${pointName} (${pointNo})`}</span>
+  </div>;
+};
+
+const riskLevelEum = { 1: '1级', 2: '2级', 3: '3级', 4: '4级', 5: '5级' };
+
+const checkInputColumns = _this => {
+  return [
+    {
+      title: '编号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      render: (text, record, index) => `${index + 1}`,
+      width: '5%'
+    },
+    {
+      title: '巡检设备',
+      dataIndex: 'equipmentName',
+      key: 'equipmentName',
+      width: '12%'
+    },
+    {
+      title: '巡查结果',
+      dataIndex: 'IsOK',
+      key: 'IsOK',
+      width: '12%'
+    },
+    {
+      title: '所在区域',
+      dataIndex: 'place',
+      key: 'place',
+      width: '15%'
+    },
+    {
+      title: '位置',
+      dataIndex: 'area',
+      key: 'area',
+      width: '15%'
+    },
+    {
+      title: '所属类型',
+      dataIndex: 'equipType',
+      key: 'equipType',
+      width: '10%'
+    },
+    {
+      title: '巡查时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      width: '18%',
+      render: text => renderLongTime(text)
+    },
+    {
+      title: '操作',
+      width: '15%',
+      dataIndex: 'equipIputLsit',
+      key: 'equipIputLsit',
+      render: (text, row) => (
+        <span className="check-input-front">
+          <a
+            href="javascript:;"
+            onClick={() => {
+              _this.onItemClick(row);
+            }}
+          >
+            巡查详情
+          </a>
+        </span>
+      )
+    }
+  ];
+};
+
+const checkItemcolumns = that => {
+  return [
+    {
+      title: '检查项分类',
+      dataIndex: 'inputClassify',
+      key: 'inputClassify',
+      width: '10%'
+    },
+    {
+      title: '检查内容',
+      dataIndex: 'NAME',
+      key: 'NAME',
+      width: '10%'
+    },
+    {
+      title: '检查项等级',
+      dataIndex: 'level',
+      key: 'level',
+      width: '10%',
+      render: text => riskLevelEum[text] || text
+    },
+    {
+      title: '法规依据',
+      dataIndex: 'basisJson',
+      key: 'basisJson',
+      width: '10%',
+      render: text => text ? text : "无"
+    },
+    {
+      title: '检查方法',
+      dataIndex: 'checkMethod',
+      key: 'checkMethod',
+      width: '10%'
+    },
+    {
+      title: '检查结果',
+      dataIndex: 'InputValue',
+      key: 'InputValue',
+      width: '15%'
+    },
+    {
+      title: '是否合格',
+      dataIndex: 'IsOK',
+      key: 'IsOK',
+      width: '10%'
+    },
+    {
+      title: '评分',
+      dataIndex: 'Score',
+      key: 'Score',
+      width: '10%'
+    },
+    {
+      title: '照片',
+      dataIndex: 'photoData',
+      key: 'photoData',
+      width: '15%',
+      render: (photos, row) => photos && photos.length ? (
+        <div style={{ padding: '3px 0' }} className="check-item-img-div" onClick={() => that.lookPhotos(photos)}>
+          <img height="50px" src={photos[0]} />
+          {
+            photos.length === 2
+            ? <img style={{ 'margin-left': '10px' }} height="50px" src={photos[1]} />
+            : photos.length > 2
+              ? <span style={{ 'line-height': '50px', 'font-size': '40px' }}>···</span>
+              : null
+          }
+        </div>
+      ) : null
+    }
+  ];
+};
+
+//偏移110px
+const offsetHeight = 110;
+const defaultHeight = 450;
+
+/**
+ * 巡检记录详情
+ */
+class CheckDetailNew extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      dataList: [], //表格数据集合
+      size: 'small', //表格大小
+      current: props.defaultPageConfig ? props.defaultPageConfig.current : 1, //当前页初始索引0
+      pageSize: props.defaultPageConfig ? props.defaultPageConfig.pageSize : 2, //当前页数据量
+      totals: 0, //所有数据总和
+      reload() {},
+      maxHeight: 650,
+      nav1: null,
+      nav2: null,
+      itemModalTitle: '巡查详情-（火灾探测器-主控楼202室）',
+      currentContent: [],
+      itemModal: false,
+      itemOverlay: false,
+      photos: []
+    };
+  }
+
+  onItemClick = record => {
+    let itemModalTitle = `巡查详情-（${record.equipmentName}-${record.equipmentName}）`;
+    this.setState({
+      currentContent: record.equipIputLsit,
+      itemModal: true,
+      itemModalTitle
+    });
+  };
+
+  lookPhotos = photos => {
+    this.setState({ itemOverlay: photos && photos.length, photos });
+  };
+
+  componentWillMount() {
+    if (this.props.location.state) {
+      let { checkID, pointID } = this.props.location.state;
+      let param = { checkID, pointID };
+      this.fillCheckInputTable(param);
+      this.fillCheckDetailTable(param);
+      this.setState({
+        pointID
+      });
+    }
+  }
+
+  componentDidMount() {
+    this.setState({
+      nav1: this.slider1,
+      nav2: this.slider2
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps) {
+      if (nextProps.location.state) {
+        let { checkID, pointID } = nextProps.location.state;
+        let param = { checkID, pointID };
+        this.fillCheckInputTable(param);
+        this.fillCheckDetailTable(param);
+      }
+    }
+  }
+
+  setPageConfig = ({ pageSize, current }) => {
+    if (pageSize !== undefined) {
+      this.pageConfig.pageSize = pageSize;
+    }
+    if (current !== undefined) {
+      this.pageConfig.current = current;
+    }
+  };
+
+  /**
+   * @memberof CheckDetail
+   */
+  getImageView = (checkDetail, type) => {
+    let view = [];
+    if (checkDetail === undefined) {
+      return;
+    }
+    let dataList = checkDetail.photosUrl;
+    if (dataList === undefined) {
+      return;
+    }
+
+    dataList.map((imgUrl, i) => {
+      view.push(
+        <div>
+          <a href={XJBaseURI + imgUrl} target="_blank" rel="noopener noreferrer">
+            <img className="check-detail-image" src={XJBaseURI + imgUrl} alt="图片" />
+          </a>
+        </div>
+      );
+    });
+
+    return view;
+  };
+
+  /**
+   *
+   *
+   * @memberof CheckDetail
+   */
+  getSmallImageView = checkDetail => {
+    let view = [];
+    if (checkDetail === undefined) {
+      return;
+    }
+    let dataList = checkDetail.photosUrl;
+    if (dataList === undefined) {
+      return;
+    }
+
+    dataList.map(imgUrl => {
+      view.push(
+        <div>
+          <img className="check-detail-image" src={XJBaseURI + imgUrl} alt="" />
+        </div>
+      );
+    });
+    return view;
+  };
+
+  getPanelHeight = () => {
+    let checkDetailTablePanel = this.checkDetailTablePanel;
+    let tableLocation = dt2react.getOffset(checkDetailTablePanel) || {};
+    return tableLocation !== undefined ? tableLocation.height - offsetHeight : defaultHeight;
+  };
+
+  generateRowkey = (record, index) => {
+    return record.id ? record.id : index + (this.state.current - 1) * this.state.pageSize;
+  };
+
+  showTotal = total => {
+    return `共 ${total} 条`;
+  };
+
+  /**
+   * 获取表格刷新方法
+   */
+  reload = r => {
+    this.setState(
+      {
+        reload: () => {
+          r();
+        }
+      },
+      r()
+    );
+  };
+
+  fillCheckDetailTable = param => {
+    if (param) {
+      fetchCheckDetailById(param).then(data => {
+        this.setState({
+          checkDetail: (data = data || {})
+        });
+      });
+    }
+  };
+
+  onItemCancel = () => {
+    this.setState({ itemModal: false });
+  };
+
+  onPicCancel = () => {
+    this.setState({ itemOverlay: false });
+  };
+
+  fillCheckInputTable = param => {
+    if (param) {
+      fetchCheckInputByIdNew(param).then(data => {
+        if (data) {
+          this.setState({
+            dataList: data,
+            totals: data.length,
+            pageSize: data.length
+          });
+        } else {
+          this.setState({
+            dataList: [],
+            totals: 0,
+            pageSize: 10
+          });
+        }
+      });
+    }
+  };
+
+  goBackAction = () => {
+    let path = {
+      pathname: CheckListPath,
+      state: { pointID: this.state.pointID }
+    };
+    browserHistory.push(path);
+  };
+
+  getPhotoUrl = checkDetail => {
+    let markerData;
+    if (checkDetail) {
+      let dataList;
+      if (checkDetail.inputItemPicShow) {
+        dataList = checkDetail.inputItemPhotosUrl;
+      } else {
+        dataList = checkDetail.photosUrl;
+      }
+      markerData = { photosUrl: dataList };
+      return markerData;
+    }
+  };
+
+  getItemContext = () => {
+    const { currentContent, itemOverlay } = this.state;
+    return <Table  className='check-item-modal-table' rowKey={(record, index) => record.id} columns={checkItemcolumns(this)} dataSource={currentContent} pagination={false} bordered />;
+  };
+  getPicContext = () => {
+    const { currentContent, itemOverlay, photos } = this.state;
+    const cofnig = {
+      className: 'center-demo',
+      centerMode: true,
+      infinite: true,
+      centerPadding: '60px',
+      slidesToShow: 2,
+      autoplay: true,
+      variableWidth: true,
+      dots: false,
+      arrows: true
+    };
+    return photos && photos.length > 1 ? (
+      <Carousel {...cofnig}>
+        {photos.map((photo, index) => (
+          <div key={`${index}1`} className="item-photo-div">
+            <img src={photo} />
+          </div>
+        ))}
+      </Carousel>
+    ) : (
+      <div className="item-photo-div">
+        <img src={photos[0]} />
+      </div>
+    );
+  };
+
+  showPic = (record, e) => {
+    let { checkID } = this.props.location.state;
+    const { checkDetail } = this.state;
+    let inputItemPicShow = record.inputId ? true : false;
+    // let inputItemPicShow = true;
+    let itemid = record.inputId ? record.inputId : 0;
+    let classifyId = record.classifyId ? record.classifyId : 0;
+    inputItemPicShow &&
+      fetchShortByCheckIdAndCheckInputId(checkID, itemid, classifyId).then(data => {
+        let photosUrl = new Array();
+        if (data && data.length > 0) {
+          photosUrl = data;
+        }
+        if (inputItemPicShow) {
+          checkDetail.inputItemPhotosUrl = photosUrl;
+        }
+        this.setState({ checkDetail });
+      });
+    checkDetail.inputItemPicShow = inputItemPicShow;
+    this.setState({ checkDetail });
+  };
+
+  render() {
+    const { totals, maxHeight, dataList, checkDetail, itemModal, itemModalTitle, itemOverlay } = this.state;
+    const parentStyle = { width: '100%' };
+    return (
+      <div className="checkDetail-root">
+        <div className="header" style={{ padding: '0px', background: '#f2f2f2' }}>
+          <div className="check-detail-header">{checkDetailHeaderResult(checkDetail)}</div>
+        </div>
+        <div className="content-parent" style={parentStyle}>
+          <div className="content">
+            <div className="check-detail-content-table">
+              <CheckDetailTable showPic={this.showPic} checkDetail={checkDetail} />
+            </div>
+            <div className="check-detail-content-input" ref={node => this.checkDetailTablePanel = node}>
+              <div className="check-detail-content1" style={{ padding: '0px', background: '#f2f2f2' }}>巡查内容</div>
+              <div className="check-detail-content2">
+                <CheckInputTable
+                  columns={checkInputColumns(this)}
+                  callBack={this.reload}
+                  dataSource={dataList}
+                  totals={totals}
+                  getTableDataAction={this.fillCheckInputTable}
+                  maxHeight={maxHeight}
+                  getPanelHeight={this.getPanelHeight}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="sider">
+            <div className="check-detail-imge">
+              <div className="check-detail-imge-text">现场照片/视频</div>
+              <Picture markerData={this.getPhotoUrl(checkDetail)} />
+            </div>
+          </div>
+        </div>
+        <Modal
+          className="check-item-modal-new"
+          header={itemModalTitle}
+          visible={itemModal}
+          destroyContent
+          noDefaultFooter
+          closable
+          onCancel={this.onItemCancel}
+          content={this.getItemContext()}
+        />
+        <Modal
+          className="check-item-modal-new"
+          header="图片查看"
+          visible={itemOverlay}
+          destroyContent
+          noDefaultFooter
+          closable
+          onCancel={this.onPicCancel}
+          content={this.getPicContext()}
+        />
+      </div>
+    );
+  }
+}
+
+CheckDetailNew.propTypes = {
+  columns: PropTypes.array, //表格列模型
+  isChecked: PropTypes.bool, //表格是否包含复选框
+  operateCol: PropTypes.func, //表格内部操作按钮，如'查看详情'等
+  callBack: PropTypes.func, //获取表格刷新方法，用于各个具体的表格回调获取，方便各种操作后进行表格刷新。
+  otherFilter: PropTypes.string, //其他查询条件
+  dataList: PropTypes.array,
+  getTableDataAction: PropTypes.func,
+  selectedRowKeys: PropTypes.array,
+  totals: PropTypes.number,
+  pagination: PropTypes.any, // 分页props, false时无分页
+  isPageable: PropTypes.bool, // 是否分页: true 分页, false 不分页, 当为undefined时默认有分页
+  isTreeTable: PropTypes.bool, // 是否是treeTable 默认非
+  rowClassName: PropTypes.func,
+  setPageConfig: PropTypes.func, //把分页参数给父类
+  defaultPageConfig: PropTypes.object, //父类默认分页参数
+  checkID: PropTypes.number //巡检记录ID
+};
+
+export default CheckDetailNew;

src/view/bizview/checkManage/checkDetail/Picture.js

+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { XJBaseURI } from 'CONSTS/urlConsts';
+import imgStatic from 'CONSTS/imgStatic';
+import Carousel from './Carousel';
+
+const transitionTime = 500;
+
+class Picture extends Component {
+
+  static propTypes = {
+    markerData: PropTypes.object
+  };
+
+  static defaultProps = {
+    markerData: {}
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      carouselVisable: false
+    };
+  }
+
+  componentDidMount() {
+    //Carousel组件中会计算容器宽度，然而此容器是通过css3过渡属性将宽度在0.5秒内慢慢放大，故目前等待0.5秒进行展示
+    this.timer = setTimeout(() => {
+      this.setState({ carouselVisable: true });
+    }, transitionTime);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer);
+  }
+
+  render() {
+    const { markerData } = this.props;
+    let { photosUrl = [] } = markerData || {};
+    // let imgs = photosUrl.map(e => `${XJBaseURI}${e.substr(1,e.length - 1)}`);
+    let imgs = photosUrl.map(e => `${XJBaseURI}${e.replace(/\#/g,"%23")}`);
+    const emptyStyle = { textAlign: '-webkit-center' };
+    const imgStyle = { paddingTop: '10px' };
+    return (
+      <div className="point-details-picture">
+        { imgs.length > 0 && this.state.carouselVisable && <Carousel files={imgs} />}
+        { imgs.length === 0 &&
+          <div className="points-details-empty" style={emptyStyle}>
+            <img src={imgStatic.datapane.smilingFace} style={imgStyle} alt="" />
+            <p>暂无图片</p>
+          </div>
+        }
+      </div>
+    );
+  }
+}
+
+export default Picture;

src/view/bizview/checkManage/checkDetail/cdn.scss

+.check-item-modal-new {
+  .amos-modal-container {
+    width: 1000px !important;
+  }
+
+  .item-photo-div {
+    width: 360px;
+    height: 420px;
+    margin: 0 20px;
+    img {
+      width: 320px;
+    }
+  }
+  .check-item-modal-table {
+    padding: 1em;
+  }
+}