评估图表未完

src/common/components/Radio/index.js

@@ -1,65 +0,0 @@
-import React from 'react';
-/*import PropTypes from 'prop-types';*/
-import on from '@common/images/icon-radio-active.png';
-import off from '@common/images/icon-radio-default.png';
-import disable from './img/disable.png';
-import style from './index.less';
-
-/**
- * 单选按钮
- * handleClick:点击触发按键 会将输入的props信息作为参数传入
- * isSelect:是否选中
- * name:右侧显示文字
- */
-class Radio extends React.Component {
-    constructor(props){
-        super(props);
-        this.handleClick = this.handleClick.bind(this);
-    }
-
-    handleClick(id){
-        this.props.handleClick(id);
-    }
-
-    getStyle(){
-        if(this.props.display=='block'){
-            return {
-                display:'block',
-                // marginBottom:'10px'
-            }
-        }
-        return {
-            display:'inline-block',
-            /*marginLeft:'10px'*/
-        }
-    }
-
-    render() {
-        const {id,name,isSelect,disabled} = this.props;
-        if(disabled){
-            return (
-                <div className={style['radio']}
-                     style={this.getStyle()}>
-                    <img src={isSelect?disable:off}/>
-                    <span style={{color:'#aaa'}}>{name}</span>
-                </div>
-            )
-        }
-        return (
-            <div className={style['radio']}
-                 onClick={() =>this.handleClick(id)}
-                 style={this.getStyle()}>
-                <img src={isSelect?on:off}/>
-                <span>{name}</span>
-            </div>
-        )
-    }
-}
-
-/*Radio.propTypes = {
-    handleClick:PropTypes.func,
-    isSelect:PropTypes.bool,
-    name:PropTypes.string
-};*/
-
-export default Radio;

src/common/components/Radio/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+/*import PropTypes from 'prop-types';*/
+import on from '@common/images/icon-radio-active.png';
+import off from '@common/images/icon-radio-default.png';
+import disable from './img/disable.png';
+import style from './index.less';
+
+/**
+ * 单选按钮
+ * handleClick:点击触发按键 会将输入的props信息作为参数传入
+ * isSelect:是否选中
+ * label:右侧显示文字
+ */
+class Radio extends React.Component {
+  constructor(props){
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(id){
+    this.props.handleClick(id);
+  }
+
+  getStyle(){
+    if(this.props.display=='block'){
+      return {
+        display:'block',
+        // marginBottom:'10px'
+      }
+    }
+    return {
+      display:'inline-block',
+      /*marginLeft:'10px'*/
+    }
+  }
+
+  render() {
+    const {id,label,isSelect,disabled} = this.props;
+    if(disabled){
+      return (
+        <div className={style['radio']}
+             style={this.getStyle()}>
+          <img src={isSelect?disable:off}/>
+          <span style={{color:'#aaa'}}>{label}</span>
+        </div>
+      )
+    }
+    return (
+      <div className={style['radio']}
+           onClick={() =>this.handleClick(id)}
+           style={this.getStyle()}>
+        <img src={isSelect?on:off}/>
+        <span>{label}</span>
+      </div>
+    )
+  }
+}
+
+/*Radio.propTypes = {
+    handleClick:PropTypes.func,
+    isSelect:PropTypes.bool,
+    name:PropTypes.string
+};*/
+
+export default Radio;

src/common/components/index.js

@@ -3,7 +3,8 @@ import Button from "./Button";
 import Loading from "./Loading";
 import Message from "./Message";
 import Modal from "./Modal";
-import Radio from "./Radio";
+import Radio from "./Radio/index";
+import CheckBtn from './CheckBtn';
 import InlineTag from './InlineTag';
 import ItemBox from './ItemBox';
 import Tab from './Tab';
@@ -26,6 +27,7 @@ module.exports = {
     Banner,
     Modal,
     Radio,
+    CheckBtn,
     Loading,
     Button,
     Message,

src/components/AssessResult/ChartItem/index.jsx

@@ -14,7 +14,7 @@ class ChartItem extends Component {
     this.state={
       weekArr:[],
       oneMonthArr:[],
-      threeMonthArr:[],
+      sixMonthArr:[],
       yearMonthArr:[]
     };
     this.getContainers = this.getContainers.bind(this);
@@ -41,7 +41,7 @@ class ChartItem extends Component {
     return arr;
   }
   getContainers(){
-    const {nameObj,obj} = this.props.data;
+    const obj = this.props.data;
     const {weekArr} = this.state;
     let arr = [];
     for(let i in obj){
@@ -73,6 +73,9 @@ class ChartItem extends Component {
 class Chart extends Component{
   constructor(props) {
     super(props);
+    this.state={
+      timeRange:'week'
+    };
     this.drawChart = this.drawChart.bind(this);
   }
   drawChart(){
@@ -144,11 +147,25 @@ class Chart extends Component{
     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);
   }
+  timeSwitch(type){
+    this.setState({
+      timeRange:type
+    });
+  }
   componentDidMount(){
     this.drawChart();
   }
   render(){
-    return <div className={style["chart-box"]} id={'chart'+this.props.index}></div>
+    const {timeRange} = this.state;
+    return <div className={style['cont']}>
+              <div className={style['time-range']}>
+                <span className={timeRange=='year'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("year")}>近一年</span>
+                <span className={timeRange=='6month'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("6month")}>近六个月</span>
+                <span className={timeRange=='month'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("month")}>近一个月</span>
+                <span className={timeRange=='week'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("week")}>近一周</span>
+              </div>
+              <div className={style["chart-box"]} id={'chart'+this.props.index}></div>
+            </div>;
   }
 }
 

src/components/AssessResult/ChooseItem/index.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import style from "../index.less";
-import { Radio} from '@commonComp';
+import { Radio,CheckBtn } from '@commonComp';
 /****
  * 大数据推送出的类型
  * 要素：名称、选项、推荐选择
@@ -8,10 +8,53 @@ import { Radio} from '@commonComp';
  * ****/
 class ChooseItem extends Component {
   constructor(props) {
-    super(props)
+    super(props);
+    this.state = {
+      saveData:null,
+      selecteds:{},
+    };
+    //this.setInitState = this.setInitState.bind(this);
+  }
+  /*setInitState(){
+    if(this.state.saveData){
+      this.setState({
+        saveData:this.props.data
+      });
+    }
+  }*/
+  handleRadio(name,value){
+    const {selecteds} = this.state;
+    const {handleChange} = this.props;
+    this.setState({
+      selecteds:Object.assign({},selecteds,{[name]:value})
+    });
+    handleChange&&handleChange(Object.assign({},selecteds,{[name]:value}));     //不能用this.state.selecteds,因为state更新不是即时的
+    /*const list = item.details.map((it)=>{
+      if(it.detailName==value){
+        return Object.assign(it,{isSelected:true});
+      }else{
+        return Object.assign(it,{isSelected:false});
+      }
+    });*/
+  }
+  handleCheckbox(name,value){
+    let {selecteds} = this.state;
+    const {handleChange} = this.props;
+    selecteds[name]?selecteds[name]:selecteds[name]=[];
+    const index = selecteds[name].findIndex((i)=>i==value);
+    if(index!=-1){
+      selecteds[name].splice(index,1);
+    }else{
+      selecteds[name].push(value);
+    }
+    this.setState({
+      selecteds:selecteds
+    });
+    handleChange&&handleChange(selecteds);
   }
   render() {
-    const {title,data  } = this.props;
+    const {title,data} = this.props;
+    const {selecteds} = this.state;
     return <div className={style['assess-item']}>
         <h2>{title}</h2>
         <div className={style['item-content']}>
@@ -22,13 +65,22 @@ class ChooseItem extends Component {
                 <div className={style['row']}>
                   {it.details&&it.details.map((i)=> {
                     if(it.controltype ==0){
-                      return <div className={style['choose-item']}><Radio name={i.detailName} value={i.detailName} handleClick={null}></Radio>{i.state?<i>（智能推荐）</i>:''}</div>;
+                      return <div className={style['choose-item']}>
+                                <Radio label={i.detailName}
+                                       value={i.detailName}
+                                       isSelect={selecteds[it.name]==i.detailName}
+                                       handleClick={this.handleRadio.bind(this,it.name,i.detailName)}></Radio>
+                                {i.state?<i>（智能推荐）</i>:''}
+                              </div>;
                     }else{
-                      return <span className={style['choose-item']}>
-                                <input id={i.detailName} value={i.detailName} name={it.name} type="checkbox" />
-                                <label htmlFor={i.detailName}>{i.detailName}</label>
+                      return <div className={style['choose-item']}>
+                                <CheckBtn id={i.detailName}
+                                          value={i.detailName}
+                                          label={i.detailName}
+                                          isSelect={selecteds[it.name]&&selecteds[it.name].includes(i.detailName)}
+                                          handleClick={this.handleCheckbox.bind(this,it.name,i.detailName)}/>
                                 {i.state?<i>（智能推荐）</i>:''}
-                              </span>;
+                              </div>;
                     }
                   })}
                 </div>

src/components/AssessResult/index.jsx

@@ -6,45 +6,44 @@ import ChooseItem from "./ChooseItem";
 import ScaleItem from "./ScaleItem";
 import ChartItem from "./ChartItem";
 
-
 class AssessResult extends Component {
   constructor(props) {
-    super(props)
+    super(props);
+    this.state={
+      chooseSelecteds:{}
+    }
+    //this.handleChooseChange = this.handleChooseChange.bind(this);
   }
   componentWillMount(){
     //获取评估
     this.props.getAssess();
   }
-  parseChartData(){
-    const {indexData}=this.props;
-    let arr=[],obj={},temp={};
-    let nameArr=[],nameObj={};
-    if(!indexData){
-      return [];
-    }
-    indexData.indexConfigData.map((it)=>{
-      arr=obj[it.orderNo]||[];
-      nameArr=nameObj[it.orderNo]||[];
-      temp=indexData.itemIndexData.find((i)=>{return i.itemName==it.indexUnique});
-      obj[it.orderNo]=[...arr,temp];
-      nameObj[it.orderNo]=[...nameArr,it.indexUnique];
+  handleScaleDel(){
+
+  }
+  handleChooseChange(i,selects){
+    const {chooseSelecteds} = this.state;
+    this.setState({
+      chooseSelecteds: Object.assign(chooseSelecteds,{[i]:selects})
     });
-    //nameObj,obj;
-    return {nameObj,obj};
+    console.log(this.state.chooseSelecteds)
+  }
+  handleChartChange(){
+
   }
-  handoutTypes(item){
+  handoutTypes(item,i){
     const {getIndexData,indexData} =this.props;
     //console.log(indexData)
-    const chartData = this.parseChartData();
+    const chartData = indexData;
     const name = item.regionName+"：";
     const list = item.data&&item.data.rows;
     switch (+item.regionType){
       case 0:     //数据来源与右侧手动添加
-        return <ScaleItem title={name} data={list}></ScaleItem>;
+        return <ScaleItem title={name} data={list} handleChange={this.handleScaleDel}></ScaleItem>;
       case 1:     //数据来源于大数据
-        return <ChooseItem title={name} data={list}></ChooseItem>;
+        return <ChooseItem title={name} data={list} handleChange={this.handleChooseChange.bind(this,i)}></ChooseItem>;
       case 10:    //数据来源于后台
-        return <ChartItem title={name} data={chartData} initFn={getIndexData}></ChartItem>;
+        return <ChartItem title={name} data={chartData||{}} initFn={getIndexData} handleChange={this.handleChartChange}></ChartItem>;
       default:
         return '';
     }
@@ -52,8 +51,8 @@ class AssessResult extends Component {
   render() {
     const { onClose,data } = this.props;
     return <div className={style['assess-cont']}>
-      {data&&data.map((it)=>{
-        return this.handoutTypes(it);
+      {data&&data.map((it,i)=>{
+        return this.handoutTypes(it,i);
       })}
     </div>;
   }

src/components/AssessResult/index.less

@@ -49,12 +49,39 @@
     border-radius: 4px;
     padding: 5px;
   }
-  .chart-box{
+  .cont{
     display: inline-block;
     width: 49%;
-    height: 225px;
+    height: 250px;
+    margin-bottom: 20px;
+    position: relative;
+    .chart-box{
+      width: 100%;
+      height: 100%;
+    }
   }
-  .chart-box:nth-child(odd){
+  .cont:nth-child(odd){
     margin-right: 2%;
   }
+  .time-range{
+    position: absolute;
+    top: 26px;
+    z-index: 2;
+    margin-left: 18px;
+    .range{
+      display: inline-block;
+      border:1px #DFDFDF solid;
+      border-radius: 10px;
+      background: #fff;
+      padding: 5px 10px;
+      margin-right: 15px;
+      font-size: 12px;
+      cursor: pointer;
+      &.on{
+        background: @blue;
+        color: #fff;
+        border-color: @blue;
+      }
+    }
+  }
 }

src/containers/AssessResult.js

@@ -5,17 +5,30 @@ import {ISREAD} from '@store/types/homePage.js';
 import {billing} from '@store/async-actions/pushMessage';
 import {getAssessData,getIndexData} from '@store/async-actions/fetchModules';
 import {SET_ASSESS_DATA,SET_INDEX_DATA} from '@types/assessResult';
+import store from '@store';
+
+/***
+ * 管理评估逻辑：
+ * 根据推送弹窗显示“智能推荐”，首次无选中项
+ * 评估内容项接口返回，其中整体评估为右侧操作加入
+ * 点确定等同于页面病例保存按钮（同时保存页面数据和评估结果）
+ * 点确定后再次打开，保留上次操作结果（页面清空，引用除外），
+ * 但推荐选项按最新推送显示
+ *
+ * ***/
 
 function mapStateToProps(state) {
-  console.log(state)
+  //console.log(state)
   const {assessResult} = state;
   return {
     data:assessResult.data,
-    indexData:assessResult.indexData
+    indexData:assessResult.indexData,
+    saveIndexData:assessResult.saveIndexData,
+    saveData:assessResult.saveData
   }
 }
 
-function mapDispatchToProps(dispatch, store) {
+function mapDispatchToProps(dispatch) {
   return {
     getAssess(){
       dispatch(getAssessData()).then((res)=>{
@@ -30,11 +43,16 @@ function mapDispatchToProps(dispatch, store) {
       });
     },
     getIndexData(){
+      const state=store.getState();
+      const indexData = state.assessResult.indexData;
+      if(Object.keys(indexData).length!=0){
+        return ;
+      }
       dispatch(getIndexData()).then((res)=>{
         if(res.data.code=='0'){
           dispatch({
             type:SET_INDEX_DATA,
-            data:res.data.data
+            data:parseChartData(res.data.data)
           })
         }
       }).catch(error=>{
@@ -44,6 +62,22 @@ function mapDispatchToProps(dispatch, store) {
   }
 }
 
+function parseChartData(indexData){
+  let arr=[],obj={},temp={};
+  let nameArr=[],nameObj={};  //暂弃
+  if(!indexData){
+    return [];
+  }
+  indexData.indexConfigData.map((it)=>{
+    arr=obj[it.orderNo]||[];
+    nameArr=nameObj[it.orderNo]||[];
+    temp=indexData.itemIndexData.find((i)=>{return i.itemName==it.indexUnique});
+    obj[it.orderNo]=[...arr,temp];
+    nameObj[it.orderNo]=[...nameArr,it.indexUnique];
+  });
+  //nameObj,obj;
+  return obj;
+}
 const AssessResultContainer = connect(mapStateToProps, mapDispatchToProps)(AssessResult);
 
 export default AssessResultContainer;

src/store/reducers/assessResult.js

@@ -1,6 +1,11 @@
-import {SET_ASSESS_DATA,SET_INDEX_DATA} from '@types/assessResult';
+import {SET_ASSESS_DATA,SET_INDEX_DATA,SET_SAVE_ASSESS_DATA} from '@types/assessResult';
 
-const init = {};
+const init = {
+  data:[],        //评估模块数据
+  indexData:{},     //评估图表数据
+  saveData:[],      //保存的评估数据-点确定时保存
+  saveIndexData:{}    //保存的评估图表数据-点确定时保存
+};
 export default (state=init,action)=>{
   const res = Object.assign({},state);
   switch (action.type){
@@ -10,6 +15,10 @@ export default (state=init,action)=>{
     case SET_INDEX_DATA:
       res.indexData = action.data;
       return res;
+    case SET_SAVE_ASSESS_DATA:
+      res.saveData = action.data;
+      res.saveIndexData = action.indexData;
+      return res;
     default:
       return res;
   }

src/store/types/assessResult.js

@@ -1,2 +1,3 @@
-export const SET_ASSESS_DATA = 'SET_ASSESS_DATA';
-export const SET_INDEX_DATA = 'SET_INDEX_DATA';
+export const SET_ASSESS_DATA = 'SET_ASSESS_DATA';     //推送的评估弹窗内容
+export const SET_INDEX_DATA = 'SET_INDEX_DATA';       //评估图表数据
+export const SET_SAVE_ASSESS_DATA = 'SET_SAVE_ASSESS_DATA';  //保存的评估弹窗数据