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/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;
+  }
+}