评估分组件，图表接口对接

src/common/components/Radio/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 /*import PropTypes from 'prop-types';*/
-import on from './img/on.png';
-import off from './img/off.png';
+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';
 
@@ -30,7 +30,7 @@ class Radio extends React.Component {
         }
         return {
             display:'inline-block',
-            marginLeft:'10px'
+            /*marginLeft:'10px'*/
         }
     }
 

src/components/AssessResult/ChartItem/index.jsx

@@ -2,23 +2,62 @@ import React, { Component } from "react";
 import style from "../index.less";
 import { Radio} from '@commonComp';
 import echarts from 'echarts';
-
+/**
+ * 来源于后台数据
+ * 图表类型
+ *
+ *
+ * **/
 class ChartItem extends Component {
   constructor(props) {
     super(props);
+    this.state={
+      weekArr:[],
+      oneMonthArr:[],
+      threeMonthArr:[],
+      yearMonthArr:[]
+    };
     this.getContainers = this.getContainers.bind(this);
   }
+  getXAxisArr(){
+    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));
+    }console.log(arr)
+    return arr;
+  }
+  getDayHours(time){
+    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));
+    }
+    return arr;
+  }
   getContainers(){
-    const {data} = this.props;
+    const {nameObj,obj} = this.props.data;
+    const {weekArr} = this.state;
     let arr = [];
-    arr = data&&data.map((it,i)=>{
-      return <Chart data={it} index={i}/>
-    });
+    for(let i in obj){
+      arr.push(<Chart data={obj[i]} index={i} xAxis = {weekArr}/>)
+    }
     return arr;
   }
   componentDidMount(){
     const {initFn} = this.props;
     initFn&&initFn();
+    this.setState({
+      weekArr:this.getXAxisArr(),
+      oneMonthArr:[],
+      threeMonthArr:[],
+      yearMonthArr:[]
+    });
   }
   render() {
     const {title,data } = this.props;
@@ -37,25 +76,69 @@ class Chart extends Component{
     this.drawChart = this.drawChart.bind(this);
   }
   drawChart(){
-    const {index,data} = this.props;
+    const {index,xAxis,data} = this.props;
     const id = 'chart'+index;
+    let series = [],names=[],inx=-1;
     var myChart = echarts.init(document.getElementById(id));
 
+    data.map((it)=>{
+      let values=new Array(168);
+      //values[24]=10;
+      it.creatTime.map((x,i)=>{
+        inx=xAxis.findIndex((a)=>{return a==x.substr(0,13)});     //日期对应横坐标的位置
+        if(inx!=-1){
+          values[inx] = it.indexValue[i];       //值对应横坐标的位置
+        }
+      });
+      names.push(it.itemName);
+      series.push({
+        name: it.itemName,
+        type: 'line',
+        data: values,
+        showAllSymbol:true
+      });
+    });
     // 指定图表的配置项和数据
     var option = {
-      tooltip: {},
+      tooltip: {
+        trigger: 'axis'
+      },
       legend: {
-        data:[data.itemName]
+        data:names
       },
       xAxis: {
-        data: data.creatTime
+        type: 'category',
+        boundaryGap: false,
+        data: xAxis,
+        splitLine:{
+          show:false
+        },
+        axisPointer:{
+          //show:false
+        },
+        axisTick:{
+          show:false,
+          interval:24
+        },
+        axisLabel:{
+          show:true,
+          showMaxLabel:true,
+          interval:24,
+          rotate:45,
+          fontSize:10
+        }
       },
-      yAxis: {},
-      series: [{
-        name: data.itemName,
-        type: 'line',
-        data: data.indexValue
-      }]
+      yAxis: {
+        type: 'value',
+        axisTick:{
+          show:false
+        },
+        axisLabel:{
+          show:true,
+          showMaxLabel:true
+        }
+      },
+      series: series
     };
 
     // 使用刚指定的配置项和数据显示图表。

src/components/AssessResult/ChooseItem/index.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+import style from "../index.less";
+import { Radio} from '@commonComp';
+/****
+ * 大数据推送出的类型
+ * 要素：名称、选项、推荐选择
+ *
+ * ****/
+class ChooseItem extends Component {
+  constructor(props) {
+    super(props)
+  }
+  render() {
+    const {title,data  } = this.props;
+    return <div className={style['assess-item']}>
+        <h2>{title}</h2>
+        <div className={style['item-content']}>
+          <ul>
+            {data&&data.map((it)=>{
+              return <li>
+                <span>{it.name}：</span>
+                <div className={style['row']}>
+                  {it.details&&it.details.map((i)=> {
+                    if(it.controltype ==1){
+                      return <div className={style['choose-item']}><Radio name={i.detailName} value={i.detailName} handleClick={null}></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>
+                                {i.state?<i>（智能推荐）</i>:''}
+                              </span>;
+                    }
+                  })}
+                </div>
+                {/*<div className={style["recommend"]}>
+                  推荐选择：正常
+                </div>*/}
+              </li>
+            })}
+          </ul>
+        </div>
+      </div>;
+  }
+}
+
+export default ChooseItem;

src/components/AssessResult/RadioItem/index.jsx

@@ -1,41 +0,0 @@
-import React, { Component } from "react";
-import style from "../index.less";
-import { Radio} from '@commonComp';
-
-class RadioItem extends Component {
-  constructor(props) {
-    super(props)
-  }
-  render() {
-    const {title,data  } = this.props;
-    return <div className={style['assess-item']}>
-        <h2>{title}</h2>
-        <div className={style['item-content']}>
-          <ul>
-            <li>
-              <span>血压控制情况：</span>
-              <div className={style['row']}>
-                <Radio name='正常' handleClick={null} isSelect={true}></Radio>
-                <Radio name='一级' handleClick={null} isSelect={false}></Radio>
-              </div>
-              <div className={style["recommend"]}>
-                推荐选择：正常
-              </div>
-            </li>
-            <li>
-              <span>BMI控制情况：</span>
-              <div className={style['row']}>
-                <Radio name='正常' handleClick={null} isSelect={true}></Radio>
-                <Radio name='一级' handleClick={null} isSelect={false}></Radio>
-              </div>
-              <div className={style["recommend"]}>
-                推荐选择：正常
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>;
-  }
-}
-
-export default RadioItem;

src/components/AssessResult/ScaleItem/index.jsx

@@ -1,7 +1,10 @@
 import React, { Component } from "react";
 import style from "../index.less";
 import deleteIcon from '@common/images/delete.png';
-
+/**
+ * 来源于页面选择
+ *
+ * **/
 class ScaleItem extends Component {
   constructor(props) {
     super(props)

src/components/AssessResult/index.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import style from "./index.less";
 import { Radio} from '@commonComp';
 import Notify from '@commonComp/Notify';
-import RadioItem from "./RadioItem";
+import ChooseItem from "./ChooseItem";
 import ScaleItem from "./ScaleItem";
 import ChartItem from "./ChartItem";
 
@@ -15,12 +15,46 @@ class AssessResult extends Component {
     //获取评估
     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];
+    });
+    //nameObj,obj;
+    return {nameObj,obj};
+  }
+  handoutTypes(item){
+    const {getIndexData,indexData} =this.props;
+    //console.log(indexData)
+    const chartData = this.parseChartData();
+    const name = item.regionName+"：";
+    const list = item.data&&item.data.rows;
+    switch (+item.regionType){
+      case 0:
+        return <ScaleItem title={name} data={list}></ScaleItem>;
+      case 1:
+        return <ChooseItem title={name} data={list}></ChooseItem>;
+      case 10:
+        return <ChartItem title={name} data={chartData} initFn={getIndexData}></ChartItem>;
+      default:
+        return '';
+    }
+  }
   render() {
-    const { onClose ,data, getIndexData,indexData} = this.props;
+    const { onClose,data } = this.props;
     return <div className={style['assess-cont']}>
-      <RadioItem title='疗效评估：' data={[]}></RadioItem>
-      <ScaleItem title='整体评估：' data={[]}></ScaleItem>
-      <ChartItem title='血糖控制情况：' data={indexData} initFn={getIndexData}></ChartItem>
+      {data&&data.map((it)=>{
+        return this.handoutTypes(it);
+      })}
     </div>;
   }
 }

src/components/AssessResult/index.less

@@ -1,16 +1,36 @@
+@import "~@less/variables.less";
 .assess-cont{
   padding: 15px;
 }
 .assess-item{
   h2{
     line-height: 40px;
-    background: #e5eefe;
+    font-size: 16px;
+    /*background: #e5eefe;*/
     padding: 0 15px;
     font-weight: bold;
   }
   .item-content{
-    margin-top: 10px;
     padding: 0 15px;
+    .choose-item{
+      margin-right: 12px;
+      display: inline-block;
+      i{
+        color: @blue;
+      }
+    }
+    input[type=checkbox]{
+      width: 14px;
+      height: 14px;
+      vertical-align: middle;
+      margin-right: 4px;
+      background-color: #fff;
+      -webkit-appearance: none;
+      border: 1px solid #c9c9c9;
+      border-radius: 4px;
+      outline: none;
+      cursor: pointer;
+    }
   }
   li {
     line-height: 35px;

src/components/TemplateItems/index.jsx

@@ -18,10 +18,12 @@ class TemplateItems extends React.Component {
     componentDidMount(){
         const height = getWindowInnerHeight()-206;
         this.$cont.current.style.height = height+"px";
-        windowEventHandler('resize', ()=>{
+        if(this.$cont.current){
+          windowEventHandler('resize', ()=>{
             const height = getWindowInnerHeight()-206;
             this.$cont.current.style.height = height+"px";
-        });
+          });
+        }
     }
     genItems() {
         const Items = [];