评估单图表维度切换

src/components/AssessResult/ChartItem/index.jsx

@@ -2,6 +2,7 @@ import React, { Component } from "react";
 import style from "../index.less";
 import { Radio} from '@commonComp';
 import echarts from 'echarts';
+import config from "@config";
 /**
  * 来源于后台数据
  * 图表类型
@@ -11,56 +12,86 @@ import echarts from 'echarts';
 class ChartItem extends Component {
   constructor(props) {
     super(props);
-    this.state={
-      weekArr:[],
-      oneMonthArr:[],
-      sixMonthArr:[],
-      yearMonthArr:[]
-    };
     this.getContainers = this.getContainers.bind(this);
+    this.rangChange = this.rangChange.bind(this);
+    this.getXAxisArr = this.getXAxisArr.bind(this);
   }
-  getXAxisArr(){
+  getXAxisArr(type){
     let now = new Date().getTime();
     let arr = [],temp=0;
-    for(let i=0;i<7;i++){
-      temp=i*1000*60*60*24;
-      arr.unshift(...this.getDayHours(now-temp));
+    //近一周
+    switch(type){
+      case 'week':
+        for(let i=0;i<7;i++){
+          temp=i*1000*60*60*24;
+          arr.unshift(...this.getDayHours(now-temp,true));
+        }
+        break;
+      case 'month':
+        for(let i=0;i<30;i++){
+          temp=i*1000*60*60*24;
+          arr.unshift(this.getDayHours(now-temp));
+        }
+        break;
+      case 'sixMonth':
+        for(let i=0;i<180;i++){
+          temp=i*1000*60*60*24;
+          arr.unshift(this.getDayHours(now-temp));
+        }
+        break;
+      case 'year':
+        for(let i=0;i<365;i++){
+          temp=i*1000*60*60*24;
+          arr.unshift(this.getDayHours(now-temp));
+        }
+        break;
+      default:
     }
+
     return arr;
   }
-  getDayHours(time){
+  getDayHours(time,isHour){
     const year = new Date(time).getFullYear();
     const month = new Date(time).getMonth()+1;
     const date = new Date(time).getDate();
     const hour = new Date(time).getHours();
     let arr=[],temp='';
-    for(let i=0;i<24;i++){
-      temp = hour-i>-1?hour-i:hour-i+24;
-      arr.unshift(year+'-'+(month<10?'0'+month:month)+'-'+(date<10?'0'+date:date)+" "+(temp<10?'0'+temp:temp));
+    const str= year+'-'+(month<10?'0'+month:month)+'-'+(date<10?'0'+date:date);
+    if(isHour){
+      for(let i=0;i<24;i++){
+        temp = hour-i>-1?hour-i:hour-i+24;
+        arr.unshift(str+" "+(temp<10?'0'+temp:temp));
+      }
+      return arr;
+    }else{
+      return str;
     }
-    return arr;
+  }
+  rangChange(type,index){
+    const {initFn} = this.props;
+    const times = this.getXAxisArr(type);
+    const range = [times[0],times[times.length-1]];
+    initFn&&initFn({range,rangeType:type,index});
   }
   getContainers(){
-    const obj = this.props.data;
-    const {weekArr} = this.state;
+    const {timeTypes} = this.props;
+    const range = this.getXAxisArr(config.chartDismen);
+    const obj = this.props.data[range[0]+range[range.length-1]];
     let arr = [];
     for(let i in obj){
-      arr.push(<Chart data={obj[i]} index={i} xAxis = {weekArr}/>)
+      arr.push(<Chart data={obj[i]} type={timeTypes&&timeTypes[i]} index={i} getXAxisArr={this.getXAxisArr} handleRangeChange={this.rangChange}/>)
     }
     return arr;
   }
   componentDidMount(){
     const {initFn} = this.props;
-    initFn&&initFn();
-    this.setState({
-      weekArr:this.getXAxisArr(),
-      oneMonthArr:[],
-      threeMonthArr:[],
-      yearMonthArr:[]
-    });
+    const type = config.chartDismen;
+    const times = this.getXAxisArr(config.chartDismen);
+    const range = [times[0],times[times.length-1]];
+    initFn&&initFn({range,rangeType:type});
   }
   render() {
-    const {title,data } = this.props;
+    const {title} = this.props;
     return <div className={style['assess-item']}>
       <h2>{title}</h2>
       <div className={style['item-content']}>
@@ -74,21 +105,42 @@ class Chart extends Component{
   constructor(props) {
     super(props);
     this.state={
-      timeRange:'week'
+      chartObj:null,
+      timeRange:'year',
+      week:props.getXAxisArr('week'),
+      month:props.getXAxisArr('month'),
+      sixMonth:props.getXAxisArr('sixMonth'),
+      year:props.getXAxisArr('year')
     };
     this.drawChart = this.drawChart.bind(this);
+    this.timeSwitch = this.timeSwitch.bind(this);
   }
   drawChart(){
-    const {index,xAxis,data} = this.props;
+    const {index,data,getXAxisArr,type} = this.props;
+    const xAxis = getXAxisArr(type);
     const id = 'chart'+index;
     let series = [],names=[],inx=-1;
-    var myChart = echarts.init(document.getElementById(id));
-
-    data.map((it)=>{
-      let values=new Array(168);
+    let myChart = echarts.init(document.getElementById(id));//this.state['chartObj'+index];
+    /*if(!myChart){
+      this.setState({
+        ['chartObj'+index]:echarts.init(document.getElementById(id))
+      });
+    }*/
+    const interval = {
+      week:24,
+      month:4,
+      sixMonth:9,
+      year:60
+    };
+    data&&data.map((it)=>{
+      let values=new Array();
+      let name='';
       //values[24]=10;
-      it.creatTime.map((x,i)=>{
-        inx=xAxis.findIndex((a)=>{return a==x.substr(0,13)});     //日期对应横坐标的位置
+      it&&it.creatTime.map((x,i)=>{
+        inx=xAxis.findIndex((a)=>{
+          name=type=='week'?x.substr(0,13):x.substr(0,10);
+          return a==name;
+        });     //日期对应横坐标的位置
         if(inx!=-1){
           values[inx] = it.indexValue[i];       //值对应横坐标的位置
         }
@@ -121,12 +173,12 @@ class Chart extends Component{
         },
         axisTick:{
           show:false,
-          interval:24
+          interval:interval[type]
         },
         axisLabel:{
           show:true,
           showMaxLabel:true,
-          interval:24,
+          interval:interval[type],
           rotate:45,
           fontSize:10
         }
@@ -148,9 +200,17 @@ class Chart extends Component{
     myChart.setOption(option);
   }
   timeSwitch(type){
+    const {handleRangeChange,index} = this.props;
     this.setState({
       timeRange:type
     });
+    handleRangeChange&&handleRangeChange(type,index);
+    //
+    const that=this;
+    setTimeout(()=>{
+      that.drawChart();
+    },300);
+
   }
   componentDidMount(){
     this.drawChart();
@@ -160,7 +220,7 @@ class Chart extends Component{
     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=='sixMonth'?style['range']+" "+style['on']:style['range']} onClick={()=>this.timeSwitch("sixMonth")}>近六个月</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>

src/components/AssessResult/index.jsx

@@ -32,7 +32,7 @@ class AssessResult extends Component {
 
   }
   handoutTypes(item,i){
-    const {getIndexData,indexData} =this.props;
+    const {getIndexData,indexData,timeTypes} =this.props;
     //console.log(indexData)
     const chartData = indexData;
     const name = item.regionName+"：";
@@ -43,7 +43,7 @@ class AssessResult extends Component {
       case 1:     //数据来源于大数据
         return <ChooseItem title={name} data={list} handleChange={this.handleChooseChange.bind(this,i)}></ChooseItem>;
       case 10:    //数据来源于后台
-        return <ChartItem title={name} data={chartData||{}} initFn={getIndexData} handleChange={this.handleChartChange}></ChartItem>;
+        return <ChartItem title={name} data={chartData||{}} timeTypes={timeTypes} initFn={getIndexData} handleChange={this.handleChartChange}></ChartItem>;
       default:
         return '';
     }

src/config/index.js

@@ -54,6 +54,7 @@ export default {
       year:"年",
       age:"岁",
     },
+    chartDismen:'year',   //评估图表默认维度：近1年year，近6个月sixMonth,近1个月month,近1周week
     showCheckNum:16,        //查体默认展开非自由文本标签的个数
     radioOptionPer:'（）',     //单选项输入占位符
     textReg:new RegExp("([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9])"), //包含中英文或数字

src/containers/AssessResult.js

@@ -4,7 +4,7 @@ import AssessResult from '@components/AssessResult';
 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 {SET_ASSESS_DATA,SET_INDEX_DATA,SET_INDEX_SUB_TYPE} from '@types/assessResult';
 import store from '@store';
 
 /***
@@ -24,7 +24,9 @@ function mapStateToProps(state) {
     data:assessResult.data,
     indexData:assessResult.indexData,
     saveIndexData:assessResult.saveIndexData,
-    saveData:assessResult.saveData
+    saveData:assessResult.saveData,
+    update:assessResult.update,
+    timeTypes:assessResult.indexTimeTypes
   }
 }
 
@@ -42,18 +44,29 @@ function mapDispatchToProps(dispatch) {
         console.log(error);
       });
     },
-    getIndexData(){
+    getIndexData(param){
       const state=store.getState();
+      const {range,rangeType,index} = param;
       const indexData = state.assessResult.indexData;
-      if(Object.keys(indexData).length!=0){
+      const obj = indexData[range[0]+range[range.length-1]];
+      if(obj&&Object.keys(obj).length!=0){
+        //console.log(obj,rangeType,index);
+        dispatch({
+          type:SET_INDEX_SUB_TYPE,
+          index,
+          rangeType
+        });
         return ;
       }
-      dispatch(getIndexData()).then((res)=>{
+      dispatch(getIndexData(range)).then((res)=>{
         if(res.data.code=='0'){
           dispatch({
             type:SET_INDEX_DATA,
-            data:parseChartData(res.data.data)
-          })
+            data:parseChartData(res.data.data),
+            range,
+            index,
+            rangeType
+          });
         }
       }).catch(error=>{
         console.log(error);
@@ -68,12 +81,12 @@ function parseChartData(indexData){
   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];
+  indexData.itemIndexData.map((it)=>{
+    temp=indexData.indexConfigData.find((i)=>{return it.itemName==i.indexUnique});
+    arr=obj[temp.orderNo]||[];
+    nameArr=nameObj[temp.orderNo]||[];
+    obj[temp.orderNo]=[...arr,it];
+    nameObj[temp.orderNo]=[...nameArr,it.itemName];
   });
   //nameObj,obj;
   return obj;

src/store/async-actions/fetchModules.js

@@ -199,13 +199,13 @@ export function getAssessData(){
   }
 }
 
-export function getIndexData(){
+export function getIndexData(range){
   return (dispatch,getStore)=>{
     const {patInfo} = getStore();
     const param = {
       diseaseId:21773,
-      startTime:'2017-08-01',
-      endTime:'2019-04-10',
+      startTime:range[0],
+      endTime:range[1],
       patientId:1001,//patInfo.message.patientId,
     };
     return json(api.getIndexData,param);

src/store/reducers/assessResult.js

@@ -1,19 +1,37 @@
-import {SET_ASSESS_DATA,SET_INDEX_DATA,SET_SAVE_ASSESS_DATA} from '@types/assessResult';
+import {SET_ASSESS_DATA,SET_INDEX_DATA,SET_SAVE_ASSESS_DATA,SET_INDEX_SUB_TYPE} from '@types/assessResult';
+import config from "@config";
 
 const init = {
   data:[],        //评估模块数据
   indexData:{},     //评估图表数据
   saveData:[],      //保存的评估数据-点确定时保存
-  saveIndexData:{}    //保存的评估图表数据-点确定时保存
+  saveIndexData:{},    //保存的评估图表数据-点确定时保存
+  indexTimeTypes:{},    //单个图表选中的维度
 };
 export default (state=init,action)=>{
   const res = Object.assign({},state);
+  const {data,range,index,rangeType} = action;
   switch (action.type){
     case SET_ASSESS_DATA:
       res.data = action.data;
       return res;
     case SET_INDEX_DATA:
-      res.indexData = action.data;
+      res.indexData[range[0]+range[1]] = data;
+      Object.keys(data).map((i)=>{
+        if(i===index){
+          res.indexTimeTypes[i]=rangeType;
+        }else{
+          res.indexTimeTypes[i]=config.chartDismen;
+        }
+      });
+      res.update = Math.random();   //对象更新
+      return res;
+    case SET_INDEX_SUB_TYPE:
+      if(!index){
+        return res;
+      }
+      res.indexTimeTypes[index] = rangeType;
+      res.update = Math.random();   //对象更新
       return res;
     case SET_SAVE_ASSESS_DATA:
       res.saveData = action.data;

src/store/types/assessResult.js

@@ -1,3 +1,4 @@
 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';  //保存的评估弹窗数据
+export const SET_SAVE_ASSESS_DATA = 'SET_SAVE_ASSESS_DATA';  //保存的评估弹窗数据
+export const SET_INDEX_SUB_TYPE = 'SET_INDEX_SUB_TYPE';   //保存单个图表时间维度