Forráskód Böngészése

处理冲突app/statistics/html/comprehensive-analysis.html

chenyue 5 éve
szülő
commit
71380f05c0

+ 8 - 0
api/record-api.js

@ -101,6 +101,14 @@
		startFollowup: function (data) {
			return httpRequest.post("doctor/followup/startFollowup", { data: data })
		},
		//获取所有药品
		findDictByName:function(data){
			return httpRequest.get("doctor/prescriptionInfo/findDictByName",{data:data})
		},
		//保存所有药品
		saveAllFollowupProjectData:function(data){
			return httpRequest.post("doctor/followup/saveAllFollowupProjectData",{data:data})
		}
}

+ 197 - 0
app/followup/css/followup_new.css

@ -0,0 +1,197 @@
input{
    padding:0 8px;
}
.followup_content{
    max-width:950px;
    margin:0 auto;
    font-size:14px;
}
.flexContent{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    flex-wrap: wrap;
}
.flexAround{
    justify-content: space-around;
}
.flexBetween{
    justify-content: space-between;
}
.right{
    justify-content: flex-end;
}
.followup_label{
    font-weight:normal;
    margin-bottom:0;
    letter-spacing: 1px;
}
.flex_1{
    flex:1;
}
.flex_2{
    flex:2;
}
.center{
    text-align:center;
    justify-content: center;
}
.form-line{
    margin:10px 0;
}
.followup_input{
    font-size:14px;
    height:34px;
    line-height: 34px;
    border-radius:0;
    border: 1px solid #8c8d8f;
}
/* 带边框的表格 */
.borderBox{
    width:100%;
    border:1px solid #8c8d8f;
    margin:25px 0;
    padding:10px;
    position: relative;
}
.borderTitle{
    position: absolute;
    display: inline-block;
    font-size: 15px;
    top:-10px;
    left:10px;
    padding:0 8px;
    background:#fff;
    letter-spacing: 2px;
}
.w-180{
    width:180px;
}
.w-120{
    width:120px;
}
.w-150{
    width:150px;
}
.w-70{
    min-width:70px;
}
.w-45{
    width:45px;
}
.w-50{
    width:50px;
}
.w-80{
    width:80px;
}
.w-90{
    width:90px;
}
.w-100{ 
    width:100px;
}
.w-110{
    width:110px;
}
.w-130{
    width:130px;
}
.w-200{
    width:200px;
}
.w-250{
    width:250px;
}
.w-558{
    width:558px;
}
.w-450{
    width:450px;
}
.w-20_{
    width:20%;
}
.w-15_{
    width:15%;
}
.w-10_{
    width:10%;
}
.marginr-8{
    margin-right:8px;
}
.marginr-15{
    margin-right:15px;
}
.margintb-8{
    margin:8px 0
}
.margintb-15{
    margin:15px 0
}
.el-input__inner{
    border-radius:0 !important;height:34px !important;line-height:34px !important;
    border: 1px solid #8c8d8f !important;
    padding:0 auto !important;
   
}
.el-select .el-input__inner{
    padding:0 8px !important;
}
.el-input__inner:-moz-placeholder, .followup_input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 适配火狐 */
    color: #999 !important;
}
.el-input__inner::-webkit-input-placeholder,.followup_input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
    color: #999 !important;
}
.el-input__inner::-moz-placeholder,.followup_input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
    color: #999 !important;
}
.el-input__inner:-ms-input-placeholder, .followup_input:-ms-input-placeholder{ /* Internet Explorer 10+  适配ie*/
    color: #999 !important;
}
.color666{
    color:#666;
}
.color777{
    color:#777;
}
.color888{
    color:#888;
}
.el-input__icon{
    color:#888;
}
.plr-8{
    padding:0 8px;
}
.f-13{
    font-size:13px;
}
.f-18{
    font-size:18px;
}
.el-radio{
    margin-bottom:0 !important;
}
.inlineBlock{
    display: inline-block;
}
.letterPace1{
    letter-spacing: 1px;
    margin:3px 0;
    line-height: 28px;
}
.mtb20{
    margin: 20px 0;
}
.el-icon-date{
    height:34px !important;
    line-height:34px !important;
}

+ 620 - 0
app/followup/html/followup_new.html

@ -0,0 +1,620 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随访表单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="../../../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/toastr/toastr.min.css"/>
    <link rel="stylesheet" href="../css/followup_new.css" />
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script type="text/javascript" src="../../../js/esModule.js" ></script>
</head>
<body>
    <div id="app">
        <div class="followup_content" v-if="queryData">
            <form class="form-horizontal">
                <div class="form-line flexContent">
                    <label class="followup_label w-70" for="type">随访类别</label>
                    <el-select v-model="queryData.followupClass" placeholder="请选择随访类别" style="width:517px;">
                        <el-option key="1" label="高血压" value="1"></el-option>
                        <el-option key="2" label="糖尿病" value="2"></el-option>
                        <el-option key="1,2" label="高血压、糖尿病" value="1,2"></el-option>
                    </el-select>
                  </div>
                <div class="form-line flexContent flexBetween">
                    <div class="flexContent flex_1">
                        <label class="followup_label w-70" for="bianhao">随访编号</label>
                        <input v-model="queryData.followupNo" type="text" class="followup_input color777 w-200" id="bianhao" placeholder="请输入随访编号">
                    </div>
                    <div class="flexContent flex_1">
                        <label class="followup_label w-70" for="jigou">所属机构</label>
                        <input type="text" v-model="queryData.orgName" class="followup_input color777 w-200" id="jigou" placeholder="请输入所属机构">
                    </div>
                    <div class="flexContent flex_1">
                        <label class="followup_label w-100" for="type">随访时间</label>
                        <el-date-picker
                        style="width:200px;color:#666;"
                        v-model="queryData.followupDate"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy-MM-dd"
					    value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                </div>
                <div class="form-line flexContent flexBetween">
                    <div class="flexContent flex_1">
                        <label class="followup_label w-70" for="yisheng">随访医生</label>
                        <input type="text" v-model="queryData.doctorName" class="followup_input color777 w-200" id="yisheng" placeholder="请输入随访医生">
                    </div>
                    <div class="flexContent flex_1">
                        <label class="followup_label w-70" for="fangshi">随访方式</label>
                        <input type="text" v-model="queryData.followupTypeName" class="followup_input color777 w-200" id="fangshi" placeholder="请输入随访方式">
                    </div>
                    <div class="flexContent flex_1">
                        <label class="followup_label w-100" for="type">下次随访日期</label>
                        <el-date-picker
                        v-model="queryData.followupNextDate"
                        type="date"
                        style="width:200px;color:#666;"
                        placeholder="选择日期"
                        format="yyyy-MM-dd HH:mm"
					    value-format="yyyy-MM-dd HH:mm">
                        </el-date-picker>
                    </div>
                </div>
                <div class="form-line flexContent flexBetween xuetang">
                    <div class="flexContent flexBetween margintb-8">
                        <label class="followup_label w-70" for="yisheng">血糖检测</label>
                        <div class="w-180 flexContent">
                            <el-radio-group v-model="radio">
                                <el-radio label="1">免费</el-radio>
                                <el-radio label="2">自费</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </div>
                <div class="borderBox">
                    <div class="borderTitle flexContent">1.症状</div>
                    <el-checkbox-group v-model="checkList">
                        <div class="flexContent">
                            <div class="w-20_ plr-8 margintb-8" v-for="(item,index) in symptoms" :key="index">
                                <el-checkbox :label="item.key">{{item.name}}</el-checkbox>
                            </div>
                        </div>
                    </el-checkbox-group>
                    <div class="flexContent flexAround" style="position: absolute;left:19%;bottom:8%;width:80%;">
                        <div class="flexContent flex_1" style="width:50%;">
                            <div class="plr-8 margintb-8" style="color:#606266;">低血糖反应</div>
                            <el-radio-group v-model="objData.HYPOG_REACT_CODE">
                                <div class="inlineBlock plr-8 margintb-8 w-80"><el-radio label="0">无</el-radio></div>
                                <div class="inlineBlock plr-8 margintb-8 w-80"><el-radio label="1">偶尔</el-radio></div>
                                <div class="inlineBlock plr-8 margintb-8 w-80"><el-radio label="2">频繁</el-radio></div>
                            </el-radio-group>
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-45">其他</label>
                            <input type="text" v-model="objData.SYMPTOM_OTHER" class="followup_input w-180" placeholder="">
                        </div>
                    </div>
                </div>
                <div class="borderBox">
                    <div class="borderTitle">2. 体征</div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1" style="flex:0.95">
                            <label class="followup_label w-45">*血压</label>
                            <input type="number" class="followup_input w-50" placeholder="" v-model="objData.BP_D">&nbsp;<span style="font-size:22px;">/</span>&nbsp;<input type="number" class="followup_input w-50"  v-model="objData.BP_U">mmHg
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label marginr-8 w-80">身高</label>
                            <input type="number" class="followup_input w-100" placeholder="" v-model="objData.HEIGHT">cm
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label marginr-8">体重</label>
                            <input type="number" class="followup_input w-100" placeholder="" v-model="objData.WEIGHT">Kg
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label marginr-8">体质指数</label>
                            <input type="number" class="followup_input w-100" placeholder="" v-model="objData.BMI">Kg
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1 color888" style="flex:0.95">
                            <label class="followup_label">目标血压</label>
                            <div>140 / 90</div>
                        </div>
                        <div class="flexContent flex_1 center">
                           
                        </div>
                        <div class="flexContent flex_1 color888">
                            <label class="followup_label marginr-8">目标体重</label>
                            <div>{{objData.WEIGHT_EXP}}</div>
                        </div>
                        <div class="flexContent flex_1 color888">
                            <label class="followup_label marginr-8">目标体质指数</label>
                           <div>30.86</div>
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1" style="flex:0.95">
                            <label class="followup_label w-45">*心率</label>
                            <input type="number" class="followup_input w-100" placeholder="" v-model="objData.HEART_RATE">
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label marginr-8">足背动脉搏动</label>
                            <el-select v-model="objData.POFDA_MARK" placeholder="请选择"  style="width:100px;">
                                <el-option key="1" label="触及" value="1"></el-option>
                                <el-option key="2" label="未触及" value="2"></el-option>
                            </el-select>
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label marginr-8">期望体重</label>
                            <input type="number" class="followup_input w-100" placeholder=""  v-model="objData.WEIGHT_EXP">Kg
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label marginr-8">期望体质指数</label>
                            <input type="number" class="followup_input w-100" placeholder=""  v-model="objData.BMI_EXP">Kg
                        </div>
                    </div>
                    
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1" style="flex:0.95">
                            <label class="followup_label w-45">其他</label>
                            <input type="text" class="followup_input w-558" placeholder="" v-model="objData.OTHER_POSITIVE_SIGNS">
                        </div>
                    </div>
                </div>
                
                <div class="borderBox">
                    <div class="borderTitle flexContent">3.实验室检查 <span style="font-size:13px;">提取结果</span></div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">空腹血糖</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.BS_FPG">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">餐后血糖</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.NO_BS_FPG">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">糖化血红蛋白</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.GHB">%
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">随机血糖</label>
                            <input type="text" class="followup_input color777 w-150" placeholder=""  v-model="objData.RANDOM_BLOOD_SUGAR">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">检查日期</label>
                            <el-date-picker
                                v-model="objData.EXAM_DATE"
                                type="date"
                                style="width:150px;color:#666;"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
					            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                        <div class="flexContent flex_1"></div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">甘油三脂</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.BLOOD_FAT_TRIGLYCERIDE">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">总胆固醇</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.BLOOD_FAT_TC">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">低密度脂蛋白</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.BLOOD_FAT_LDLC">mmol/L
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">血清肌酐</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.RENAL_FUNCTION_CREATININE">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">血尿素氮</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.RENAL_FUNCTION_BUN">mmol/L
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-70">尿微量白蛋白</label>
                            <input type="text" class="followup_input color777 w-150" placeholder="" v-model="objData.MICROALBUMINURIA">mg/dL
                        </div>
                    </div>
                </div>
                <div class="borderBox">
                    <div class="borderTitle flexContent">4.生活方式指导</div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1">
                            <label class="followup_label w-100">日吸烟量</label>
                            <input type="text" class="followup_input color777 w-120" placeholder="" v-model="objData.DAILY_SMOKING">支
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-100">日饮酒量</label>
                            <input type="text" class="followup_input color777 w-120" placeholder="" v-model="objData.DAILY_DRINKING">两
                        </div>
                        <div class="flexContent">
                            <label class="followup_label w-100">*运动频率</label>
                            <el-select v-model="objData.EXERCISE_FREQ_CODE" placeholder="请选择" style="width:210px;margin-right:8px;">
                                <el-option key="1" label="每周<=3次" value="1"></el-option>
                                <el-option key="2" label="每周>3次" value="2"></el-option>
                                <el-option key="3" label="极少运动" value="3"></el-option>
                                <el-option key="4" label="残疾、关节等原因不能运动" value="4"></el-option>
                                <el-option key="99" label="不详" value="99"></el-option>
                            </el-select>
                            <input type="text" class="followup_input color777 w-50" placeholder="" v-model="objData.EXERCISE_DURATION_MINS">分钟/次
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1">
                            <label class="followup_label w-100">日吸烟量期望</label>
                            <input type="text" class="followup_input color777 w-120" placeholder="" v-model="objData.SOMKING_EXP">支
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-100">日饮酒量期望</label>
                            <input type="text" class="followup_input color777 w-120" placeholder="" v-model="objData.DRINK_EXP">两
                        </div>
                        <div class="flexContent">
                            <label class="followup_label w-100">运动频率期望</label>
                            <el-select v-model="objData.EXERCISE_FREQ_CODE_EXP" placeholder="请选择" style="width:210px;margin-right:8px;">
                                <el-option key="1" label="每周<=3次" value="1"></el-option>
                                <el-option key="2" label="每周>3次" value="2"></el-option>
                                <el-option key="3" label="极少运动" value="3"></el-option>
                                <el-option key="4" label="残疾、关节等原因不能运动" value="4"></el-option>
                                <el-option key="99" label="不详" value="99"></el-option>
                            </el-select>
                            <input type="text" class="followup_input color777 w-50" placeholder="" v-model="objData.EXERCISE_DURATION_MINS_EXP">分钟/次
                        </div>
                    </div>
                    <div class="form-line flexContent right">
                        <div class="flexContent color888">
                            <label class="followup_label marginr-8  w-110">目标运动频率:</label>
                            <div class="marginr-8">每周> 三次</div>
                            <label class="followup_label marginr-8">目标运动时长:</label>
                            <div>30</div>
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1" style="flex:0.91;">
                            <label class="followup_label w-100">遵医行为</label>
                            <el-select v-model="objData.COMPLIANCE_RESULT_CODE" placeholder="请选择" style="width:120px;">
                                <el-option key="1" label="理想" value="1"></el-option>
                                <el-option key="2" label="良好" value="2"></el-option>
                                <el-option key="3" label="一般" value="3"></el-option>
                                <el-option key="4" label="差" value="4"></el-option>
                            </el-select>
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-100">心理调整</label>
                            <el-select v-model="objData.PSY_ADJUST_RESULT_CODE" placeholder="请选择" style="width:120px;">
                                <el-option key="1" label="理想" value="1"></el-option>
                                <el-option key="2" label="良好" value="2"></el-option>
                                <el-option key="3" label="一般" value="3"></el-option>
                                <el-option key="4" label="差" value="4"></el-option>
                            </el-select>
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-80">主食</label>
                            <input type="text" class="followup_input color777 w-120" placeholder="" v-model="objData.DAILY_STAPLE">(克/天)
                        </div>
                    </div>
                    <div class="form-line flexContent flexBetween">
                        <div class="flexContent flex_1" style="flex:0.91;">
                            <label class="followup_label w-100">*摄盐情况</label>
                            <el-select v-model="objData.SALT_TAKEN_LEVEL_CODE" placeholder="请选择" style="width:120px;">
                                <el-option key="1" label="轻" value="1"></el-option>
                                <el-option key="2" label="中" value="2"></el-option>
                                <el-option key="3" label="重" value="3"></el-option>
                            </el-select>
                        </div>
                        <div class="flexContent flex_1">
                            <label class="followup_label w-100">摄盐情况期望</label>
                            <el-select v-model="objData.SALT_TAKEN_LEVEL_EXP" placeholder="请选择" style="width:120px;">
                                <el-option key="1" label="轻" value="1"></el-option>
                                <el-option key="2" label="中" value="2"></el-option>
                                <el-option key="3" label="重" value="3"></el-option>
                            </el-select>
                        </div>
                        <div class="flexContent flex_1">
                           
                        </div>
                    </div>
                </div>
                <div class="borderBox">
                        <div class="borderTitle flexContent">5.评价</div>
                        <div class="form-line flexContent flexBetween">
                                <div class="flexContent">
                                    <label class="followup_label w-120">高血压随访分类</label>
                                    <el-select v-model="objData.HYP_FOLLOWUP_TYPE_CODE" placeholder="请选择" style="width:150px;margin-right:8px;">
                                        <el-option key="" label="" value=""></el-option>
                                        <el-option key="1" label="控制满意" value="1"></el-option>
                                        <el-option key="2" label="控制不满意" value="2"></el-option>
                                        <el-option key="3" label="不良反应" value="3"></el-option>
                                        <el-option key="4" label="并发症" value="4"></el-option>
                                        <el-option key="5" label="控制一般" value="5"></el-option>
                                    </el-select>
                                    <input type="text" class="followup_input color777 w-450" placeholder="" v-model="objData.HYP_COMPLICATION_DETAIL">
                                </div>
                            </div>
                    </div>
    
                    <div class="borderBox">
                        <div class="borderTitle flexContent">6.用药情况</div>
                        <div class="form-line flexContent flexBetween">
                            <div class="flexContent">
                                <label class="followup_label w-100">*服药依从性</label>
                                <el-select v-model="objData.DRUG_COMPLIANCE_CODE" placeholder="请选择" style="width:150px;">
                                    <option value=""></option>
                                    <el-option key="1" label="规律服药" value="1"></el-option>
                                    <el-option key="2" label="间断服药" value="2"></el-option>
                                    <el-option key="3" label="不服药" value="3"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div>
                            <!-- <div class="flexContent f-13 margintb-15" style="letter-spacing: 1px;">
                                <div class="marginr-15">提取用药信息</div>
                                <div>清空用药信息</div>
                            </div> -->
                            <div class="flexContent">
                                <div class="flex_2">药物名称</div>
                                <div class="flex_1">次剂量</div>
                                <div class="flex_1">单位</div>
                                <div class="flex_1">频次</div>
                            </div>
                            <div class="flexContent margintb-8" v-for="item in noInsulin">
                                <div class="flex_2">
                                    <el-select @change="val=>getDrugs(item,val)" v-model="item.drugsName" filterable placeholder="" style="width:85%"  class="color777">
                                        <el-option
                                            v-for="(itemName,idx) in allDrugs"
                                            :key="idx"
                                            :label="itemName.drugName"
                                            :value="itemName.drugCode">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="flex_1"><input type="text" v-model="item.dose" class="followup_input color777" style="width:85%" placeholder=""></div>
                                <div class="flex_1">
                                    <select v-model="item.unit" class="form-control":value="item.unit" style="width:85%">
                                        <option value="">请选择</option>
                                        <option v-for="item in unit_dict" :value="item.key" v-text="item.name"></option>
                                    </select>
                                </div>
                                <div class="flex_1">
                                    <select v-model="item.frequency" class="form-control">
                                        <option value="">请选择</option>
                                        <option v-for="item in frequency_dict" :value="item.key" v-text="item.name"></option>
                                    </select>
                                </div>
                            </div>
                            <!-- <div class="flexContent f-13 margintb-15" style="letter-spacing: 1px;">
                                <div class="marginr-15">提取用药信息</div>
                                <div>清空用药信息</div>
                            </div> -->
                            <div class="flexContent">
                                <div class="flex_2">胰岛素药物名称</div>
                                <div class="flex_1">次剂量</div>
                                <div class="flex_1">单位</div>
                                <div class="flex_1">频次</div>
                            </div>
                            <div class="flexContent margintb-8" v-for="item in hasInsulin">
                                <div class="flex_2">
                                    <el-select @change="getDrugs(item)" v-model="item.drugsName" filterable placeholder="" style="width:85%"  class="color777">
                                        <el-option
                                            v-for="(itemName,idx) in allDrugs"
                                            :key="idx"
                                            :label="itemName.drugName"
                                            :value="itemName.drugCode">
                                        </el-option>
                                    </el-select>
                                </div>
                                <div class="flex_1"><input v-model="item.dose" type="text" class="followup_input color777" style="width:85%" placeholder=""></div>
                                <div class="flex_1">
                                    <select v-model="item.unit" class="form-control" style="width:85%;">
                                        <option value="">请选择</option>
                                        <option v-for="item in unit_dict" :value="item.key" v-text="item.name"></option>
                                    </select>
                                </div>
                                <div class="flex_1">
                                    <select v-model="item.frequency" class="form-control" style="width:85%">
                                        <option value="">请选择</option>
                                        <option v-for="item in frequency_dict" :value="item.key" v-text="item.name"></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- <div v-if="hasInsulin.length==0 && noInsulin.length==0">暂无药品</div> -->
                    </div>
                    <div class="borderBox">
                        <div class="borderTitle flexContent">7.控制目标</div>
                        <div class="form-line flexContent flexBetween">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">控制日期</label>
                                <el-date-picker
                                    v-model="objData.CONTROL_DATE"
                                    type="date"
                                    style="width:150px;color:#666;"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
					                value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">制定者</label>
                                <input type="text" v-model="objData.CONTROL_CONSTITUTOR" class="followup_input color777 w-130" placeholder="">
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">血压</label>
                                <input v-model="objData.CONTROL_BP_D" type="number" class="followup_input w-50" placeholder="">&nbsp;<span style="font-size:22px;">/</span>&nbsp;<input v-model="objData.CONTROL_BP_U" type="number" class="followup_input w-50" placeholder="">mmHg
                            </div>
                        </div>
                        <div class="form-line flexContent flexBetween">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">空腹血糖</label>
                                <input type="text" v-model="objData.CONTROL_BS_FPG" class="followup_input color777 w-130" placeholder="">mmol/L
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">餐后血糖</label>
                                <input type="text" v-model="objData.CONTROL_NO_BS_FPG" class="followup_input color777 w-130" placeholder="">mmol/L
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">糖化血红蛋白</label>
                                <input type="text" v-model="objData.CONTROL_GHB" class="followup_input color777 w-130" placeholder="">%
                            </div>
                        </div>
                        <div class="form-line flexContent flexBetween">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">甘油三脂</label>
                                <input type="text" v-model="objData.CONTROL_TRIGLYCERIDE" class="followup_input color777 w-130" placeholder="">mmol/L
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">总胆固醇</label>
                                <input type="text" v-model="objData.CONTROL_TOTAL_CHOLESTEROL" class="followup_input color777 w-130" placeholder="">mmol/L
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">低密度脂蛋白</label>
                                <input type="text" v-model="objData.CONTROL_LDL" class="followup_input color777 w-130" placeholder="">mmol/L
                            </div>
                        </div>
                        <div class="form-line flexContent flexBetween">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">体重</label>
                                <input type="text" v-model="objData.CONTROL_WEIGHT" class="followup_input color777 w-130" placeholder="">Kg
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-70">运动频率</label>
                                <el-select v-model="objData.CONTROL_EXERCISE_FREQ_CODE" placeholder="请选择" style="width:210px;margin-right:8px;">
                                    <el-option key="1" label="每周<=3次" value="1"></el-option>
                                    <el-option key="2" label="每周>3次" value="2"></el-option>
                                    <el-option key="3" label="极少运动" value="3"></el-option>
                                    <el-option key="4" label="残疾、关节等原因不能运动" value="4"></el-option>
                                    <el-option key="99" label="不详" value="99"></el-option>
                                </el-select>
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">运动时长</label>
                                <input type="text" v-model="objData.CONTROL_EXERCISE_DURATION_MINS" class="followup_input color777 w-130" placeholder="">分钟/次
                            </div>
                        </div>
                    </div>
                    <div class="borderBox">
                        <div class="borderTitle flexContent">8.健康教育</div>
                        <div class="form-line flexContent flexContent">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-80">日期</label>
                                <el-date-picker
                                    v-model="objData.ARCHIVE_TIME"
                                    type="date"
                                    style="width:200px;color:#666;"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd"
					                value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-80">记录者</label>
                                <input v-model="objData.ARCHIVE_OPERATOR_NAME" type="text" class="followup_input color777 w-250" placeholder="">
                            </div>
                        </div>
                        <div class="form-line flexContent flexContent">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-80">健康教育</label>
                                <el-select v-model="objData.HEALTH_EDUCATE" placeholder="请选择" style="width:210px;margin-right:8px;">
                                    <el-option key="1" label="高血压健康教育" value="1"></el-option>
                                    <el-option key="2" label="糖尿病健康教育" value="2"></el-option>
                                    <el-option key="3" label="低盐饮食" value="3"></el-option>
                                    <el-option key="4" label="自定义高血压健康教育" value="4"></el-option>
                                    <el-option key="5" label="自定义糖尿病健康教育" value="5"></el-option>
                                    <el-option key="6" label="高糖并存健康教育处方" value="5"></el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="form-line flexContent flexContent">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-80">教育内容</label>
                                <textarea rows="10" v-model="objData.EDUCATE_CONTENT" cols="93"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="borderBox">
                        <div class="borderTitle flexContent">9.转诊</div>
                        <div class="margintb-8 flexContent flexContent">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">药物不良反应</label>
                                <el-radio-group v-model="objData.DRUG_ADVERSE_MARK" style="height:50px;line-height: 50px;">
                                    <div class="inlineBlock plr-8 margintb-8 w-80"><el-radio label="0">无</el-radio></div>
                                    <div class="inlineBlock plr-8 margintb-8">
                                        <el-radio label="1" style="margin-right:8px;">有</el-radio>
                                        <input v-if="objData.DRUG_ADVERSE_MARK==1" v-model="objData.ADR_REMARK" type="text" class="followup_input color777 w-180" placeholder="请填写药物不良反应">
                                    </div>
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="margintb-8 flexContent flexContent">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">患者拒绝转诊</label>
                                <el-radio-group v-model="objData.REFUSE_REFERRAL" style="height:50px;line-height: 50px;">
                                    <div class="inlineBlock plr-8 margintb-8 w-80"><el-radio label="0">否</el-radio></div>
                                    <div class="inlineBlock plr-8 margintb-8">
                                        <el-radio label="1" style="margin-right:8px;">是</el-radio>
                                        <input v-if="objData.REFUSE_REFERRAL==1" v-model="objData.REFUSE_REFERRAL_WHY" type="text" class="followup_input color777 w-180" placeholder="请填写拒绝转诊原因">
                                    </div>
                                </el-radio-group>
                            </div>
                        </div>
                        <div class="margintb-8 flexContent flexContent">
                            <div class="flexContent flex_1">
                                <label class="followup_label w-80">*转诊原因</label>
                                <input type="text" v-model="objData.TRANSFER_RESON" class="followup_input color777 w-250" placeholder="请填写转诊原因">
                            </div>
                            <div class="flexContent flex_1">
                                <label class="followup_label w-100">*转诊机构科室</label>
                                <input type="text"  v-model="objData.TRANSFER_ORG_DEPT" class="followup_input color777 w-250" placeholder="">
                            </div>
                        </div>
                        <div class="margintb-8 f-18 letterPace1">
                            <div>温馨提醒1:如需达到高血压健康规范管理要求【症状、血压、心率、生活方式指导(运动频率、摄盐情况)、服药依从性】需要登记,并且一年内至少登记4次随访,每次随访时间间隔不能超过3个月。</div>
                            <div>温馨提醒2:如需达到糖尿病健康规范管理要求【症状、血糖、生活方式指导(运动频率)、服药依从性】需要登记,并且一年内至少登记4次随访,每次随访时间间隔不能超过3个月。</div>
                        </div>
                    </div>
            </form>
            <div class="mtb20 center">
                <el-button type="primary" @click="submitData">保存</el-button>
            </div>
            
        </div>
    </div>
    <script type="text/javascript" src="../../../js/vue.js"></script>
    <script type="text/javascript" src="../../../js/jquery-2.2.4.js" ></script>
    <script src="../../../js/es6-promise.js"></script>
    <script src="../../../plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/util.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../api/http-request.js"></script>
    <script src="../../../api/record-api.js"></script>
    <script src="../js/recipe_frequency_dict.js"></script>
    <script src="../js/measure_unit_dict.js"></script>
    <script type="text/javascript" src="../js/followup_new.js" ></script>
</body>
</html>

+ 1 - 1
app/followup/html/lay_followUp_detail.html

@ -12,7 +12,7 @@
	        var url = 'followup_tabs.html'+search;
	        window.onload = function(){
	            document.getElementById("fv_tab").src = url;
	            document.getElementById("fv_main").src = "followup_register.html"+search;
	            document.getElementById("fv_main").src = "followup_new.html"+search;
	        }
	    </script>
	</head>

+ 318 - 0
app/followup/js/followup_new.js

@ -0,0 +1,318 @@
Vue.filter('dateString', function (value) {
    return value?value.substr(0,16):''
})
new Vue({
    el:"#app",
    data: {
        date1:'',
        radio: '1',
        value:'',
        id:'1888849',
        status:false,//2计划中,可编辑
        queryData:{},
        objData:{}, //症状
        checkList:[],//症状体现
        symptoms:[
            {key:"NO_SYMPTOM",name:'无症状',value:'',code:'0'},
            {key:"HEADACHE",name:'头痛头晕',value:'',code:'1'},
            {key:"NAUSEA",name:'恶心呕吐',value:'',code:'1'},
            {key:"VERTIGO_TINNITUS",name:'眼花耳鸣',value:'',code:'1'},
            {key:"DIFFICULTY_BREATHING",name:'呼吸困难',value:'',code:'1'},
            {key:"PALPITATIONS",name:'心悸胸闷',value:'',code:'1'},
            {key:"EPISTAXIS_BLEEDING",name:'鼻衄出血不止',value:'',code:'1'},
            {key:"LIMBS_NUMB",name:'四肢发麻',value:'',code:'1'},
            {key:"EXTREMITY_EDEMA",name:'下肢水肿',value:'',code:'1'},
            {key:"POLYDIPSIA",name:'多饮',value:'',code:'1'},
            {key:"MORE_FOOD",name:'多食',value:'',code:'1'},
            {key:"MORE_URINE",name:'多尿',value:'',code:'1'},
            {key:"BLURRED_VISION",name:'视力模糊',value:'',code:'1'},
            {key:"INFECTION",name:'感染',value:'',code:'1'},
            {key:"NUMB_HANDS",name:'四肢麻痹',value:'',code:'1'},
            {key:"WEIGHT_LOSS",name:'体重下降',value:'',code:'1'}
        ],//症状
        frequency_dict:recipe_frequency_dict,//频次
  	    unit_dict:measure_unit_dict,  //单位
        hasInsulin:[],//胰岛素药
        noInsulin:[],//其他药
        allDrugs:[],//所有药品
        // remark:'' //其他,    
    },
    mounted:function(){
        var vm = this
        this.initData()
    },
    methods: {
        getDrugs(data,val){
            console.log(data)
            console.log(val)
            var drug = this.allDrugs.find(item=>{
                return item.drugCode == val
            })
            data = Object.assign(data,{
                drugsName:drug.drugName,
                drugsGroup:'normal',
                drugsCode:drug.drugCode
            }) 
            console.log(data)
        },
        initData:function(){
            var vm  = this
            //获取随访登记数据
            recordAPI.getFollowup({id:this.id}).then(function(res){
				if(res.status==200){
                    var data = res.data
                    data.followupDate = data.followupDate?data.followupDate.substr(0,16):''
					vm.queryData = data
                    window.localStorage.setItem('serveFollowupDate',JSON.stringify(data));//储存数据,后续页面需要调用
                    console.log(vm.queryData.followupDate)
					if(data.status=='2'){
						vm.status=false
					  }else{
						  vm.status=true
					  }
				}else{
					toastr.error(res.msg)
				}	
            })
            //获取数据
            recordAPI.getFollowupProjectData({id:this.id}).then(function(res){
                if(res.status==200){
                    var data = res.data;
                    console.log(data.EXAM_DATE)
                    vm.objData = res.data
                    delete data["create_time"];delete data["followup_id"];delete data["followup_project"];delete data["id"];
                    var allData = vm.symptoms,checkList=[]
                    for(var key in data){
                        for(var j=0;j<allData.length;j++){
                            if(allData[j].key == key){
                                checkList.push(key)
                                break;
                            }
                        }
                        vm.checkList = checkList
                    }
                }
            })
            // 获取已填写的药品数据
            recordAPI.getFollowupDrugs({id:this.id}).then(function(res){
                if(res.status==200){
                    var data = res.data.DRUG_LIST;
                    if(data.length){
                        for(var i=0;i<data.length;i++){
                            if(data[i].drugsGroup == 'insulin'){//胰岛素药品
                                vm.hasInsulin.push(data[i])
                            }else{
                                vm.noInsulin.push(data[i])
                            }
                        }
                        
                    }else{
                        var k=6
                        while(k>0){
                            vm.hasInsulin.push({
                                drugsName:'',
                                dose:'',
                                unit:'',
                                frequency:'',
                                drugsGroup:"",
                                drugsCode:""
                            })
                            vm.noInsulin.push({
                                drugsName:'',
                                dose:'',
                                unit:'',
                                frequency:'',
                                drugsGroup:"",
                                drugsCode:""
                            })
                            k--
                        }
                    }
                    if(vm.hasInsulin.length<6){
                        while((6-vm.hasInsulin.length)>0){
                            vm.hasInsulin.push({
                                drugsName:'',
                                dose:'',
                                unit:'',
                                frequency:'',
                                drugsGroup:"",
                                drugsCode:""
                            })
                        }
                    }
                    if(vm.noInsulin.length<6){
                        while((6-vm.noInsulin.length)>0){
                            vm.noInsulin.push({
                                drugsName:'',
                                dose:'',
                                unit:'',
                                frequency:'',
                                drugsGroup:"",
                                drugsCode:""
                            })
                        }
                    }
                }else{
                    toastr.error('获取数据失败')
                    while((6-vm.hasInsulin.length)>0){
                        vm.hasInsulin.push({
                            drugsName:'',
                            dose:'',
                            unit:'',
                            frequency:'',
                            drugsGroup:"",
                            drugsCode:""
                        })
                    }
                     while((6-vm.noInsulin.length)>0){
                            vm.noInsulin.push({
                                drugsName:'',
                                dose:'',
                                unit:'',
                                frequency:'',
                                drugsGroup:"",
                                drugsCode:""
                            })
                        }
                }
            })
            //获取所有药品数据
            recordAPI.findDictByName({name:''}).then(function(res){
                if(res.status==200){
                    vm.allDrugs = res.data
                }
            })
        },
        submitData(){
            var vm = this,params={
                id: this.id, //随访记录ID
                date:this.queryData.followupDate,  //随访时间
                followupType:this.queryData.followupType,//随访方式
                followupClass:this.queryData.followupClass, //随访类别【1.高血压 2.糖尿病】
                followupManagerStatus:this.queryData.followupManagerStatus, //随访管理状态
                followupNo:this.queryData.followupNo, //随访记录编码
                plandate: this.queryData.followupNextDate,//下次随访时间
                // prescriptioncode:'',//续方CODE
                followupProjectData:{} //随访项目数据
            },symptom,sign={},inspect={},guidance={},evaluate={},medication={},target={},education={},referral={},drugs
            var checkList =  Array.from(vm.checkList, (data) => [data,1])
            symptom = Object.fromEntries(checkList)
            symptom["HYPOG_REACT_CODE"]=this.objData.HYPOG_REACT_CODE
            symptom["SYMPTOM_OTHER"]=this.objData.SYMPTOM_OTHER
            sign["BP_D"]=this.objData.BP_D
            sign["BP_U"]=this.objData.BP_U
            sign["HEIGHT"]=this.objData.HEIGHT
            sign["WEIGHT"]=this.objData.WEIGHT
            sign["BMI"]=this.objData.BMI
            sign["WEIGHT_EXP"]=this.objData.WEIGHT_EXP
            sign["BMI_EXP"]=this.objData.BMI_EXP   
            sign["HEART_RATE"]=this.objData.HEART_RATE 
            sign["POFDA_MARK"]=this.objData.POFDA_MARK 
            sign["OTHER_POSITIVE_SIGNS"]=this.objData.OTHER_POSITIVE_SIGNS
            inspect["BS_FPG"]=this.objData.BS_FPG
            inspect["NO_BS_FPG"]=this.objData.NO_BS_FPG
            inspect["GHB"]=this.objData.GHB
            inspect["RANDOM_BLOOD_SUGAR"]=this.objData.RANDOM_BLOOD_SUGAR
            inspect["EXAM_DATE"]=this.objData.EXAM_DATE
            inspect["BLOOD_FAT_TRIGLYCERIDE"]=this.objData.BLOOD_FAT_TRIGLYCERIDE
            inspect["BLOOD_FAT_TC"]=this.objData.BLOOD_FAT_TC
            inspect["BLOOD_FAT_LDLC"]=this.objData.BLOOD_FAT_LDLC
            inspect["RENAL_FUNCTION_CREATININE"]=this.objData.RENAL_FUNCTION_CREATININE
            inspect["RENAL_FUNCTION_BUN"]=this.objData.RENAL_FUNCTION_BUN
            inspect["MICROALBUMINURIA"]=this.objData.MICROALBUMINURIA
            guidance["DAILY_SMOKING"]=this.objData.DAILY_SMOKING
            guidance["DAILY_DRINKING"]=this.objData.DAILY_DRINKING
            guidance["EXERCISE_FREQ_CODE"]=this.objData.EXERCISE_FREQ_CODE
            guidance["EXERCISE_DURATION_MINS"]=this.objData.EXERCISE_DURATION_MINS
            guidance["SOMKING_EXP"]=this.objData.SOMKING_EXP
            guidance["DRINK_EXP"]=this.objData.DRINK_EXP
            guidance["EXERCISE_FREQ_CODE_EXP"]=this.objData.EXERCISE_FREQ_CODE_EXP
            guidance["EXERCISE_DURATION_MINS_EXP"]=this.objData.EXERCISE_DURATION_MINS_EXP
            guidance["COMPLIANCE_RESULT_CODE"]=this.objData.COMPLIANCE_RESULT_CODE
            guidance["PSY_ADJUST_RESULT_CODE"]=this.objData.PSY_ADJUST_RESULT_CODE
            guidance["DAILY_STAPLE"]=this.objData.DAILY_STAPLE
            guidance["SALT_TAKEN_LEVEL_CODE"]=this.objData.SALT_TAKEN_LEVEL_CODE
            guidance["SALT_TAKEN_LEVEL_EXP"]=this.objData.SALT_TAKEN_LEVEL_EXP
            evaluate["HYP_FOLLOWUP_TYPE_CODE"] = this.objData.HYP_FOLLOWUP_TYPE_CODE  //高血压
            evaluate["HYP_COMPLICATION_DETAIL"] = this.objData.HYP_COMPLICATION_DETAIL
            evaluate["DIA_FOLLOWUP_TYPE_CODE"] = "" //糖尿病
            evaluate["DIA_COMPLICATION_DETAIL"] = ""
            drugs={
                DRUG_COMPLIANCE_CODE:this.objData.DRUG_COMPLIANCE_CODE
            }
            medication["drugsData"] = []
            for(let k=0;k<vm.noInsulin.length;k++){
                //药品名称
                if(vm.noInsulin[k].drugsName){
                    medication["drugsData"].push(vm.noInsulin[k])
                }
            }
            for(let k=0;k<vm.hasInsulin.length;k++){
                //胰岛素药品
                if(vm.hasInsulin[k].drugsName){
                    medication["drugsData"].push(vm.hasInsulin[k])
                }
            }
            medication["drugsData"].map(item=>{
                let data = item
                return {
                    drugsName:data.drugsName,
                    dose:data.dose,
                    unit:data.unit,
                    frequency:data.frequency,
                    drugsGroup:data.drugsGroup,
                    drugsCode:data.drugsCode
                }
            })
            target["CONTROL_DATE"]=this.objData.CONTROL_DATE
            target["CONTROL_CONSTITUTOR"]=this.objData.CONTROL_CONSTITUTOR
            target["CONTROL_BP_D"]=this.objData.CONTROL_BP_D
            target["CONTROL_BP_U"]=this.objData.CONTROL_BP_U
            target["CONTROL_BS_FPG"]=this.objData.CONTROL_BS_FPG
            target["CONTROL_NO_BS_FPG"]=this.objData.CONTROL_NO_BS_FPG
            target["CONTROL_GHB"]=this.objData.CONTROL_GHB
            target["CONTROL_TRIGLYCERIDE"]=this.objData.CONTROL_TRIGLYCERIDE
            target["CONTROL_TOTAL_CHOLESTEROL"]=this.objData.CONTROL_TOTAL_CHOLESTEROL
            target["CONTROL_LDL"]=this.objData.CONTROL_LDL
            target["CONTROL_WEIGHT"]=this.objData.CONTROL_WEIGHT
            target["CONTROL_EXERCISE_FREQ_CODE"]=this.objData.CONTROL_EXERCISE_FREQ_CODE
            target["CONTROL_EXERCISE_DURATION_MINS"]=this.objData.CONTROL_EXERCISE_DURATION_MINS
            education["ARCHIVE_TIME"]=this.objData.ARCHIVE_TIME
            education["ARCHIVE_OPERATOR_NAME"]=this.objData.ARCHIVE_OPERATOR_NAME
            education["HEALTH_EDUCATE"]=this.objData.HEALTH_EDUCATE
            education["EDUCATE_CONTENT"]=this.objData.EDUCATE_CONTENT
            referral["DRUG_ADVERSE_MARK"]=this.objData.DRUG_ADVERSE_MARK
            referral["ADR_REMARK"]=this.objData.ADR_REMARK
            referral["REFUSE_REFERRAL"]=this.objData.REFUSE_REFERRAL
            referral["REFUSE_REFERRAL_WHY"]=this.objData.REFUSE_REFERRAL_WHY
            referral["TRANSFER_RESON"]=this.objData.TRANSFER_RESON
            referral["TRANSFER_ORG_DEPT"]=this.objData.TRANSFER_ORG_DEPT
            var obj = {}
            Object.assign(obj,symptom,sign,inspect,guidance,evaluate,target,education,referral,drugs)
            params.followupProjectData["followupProjectData"] = obj
            params.followupProjectData["drugsData"]=medication["drugsData"]
            console.log(params)
            params.followupProjectData = JSON.stringify(params.followupProjectData)
            recordAPI.saveAllFollowupProjectData(params).then(function(res){
                if(res.status==200){
                    toastr.info(res.msg)
                }else{
                    toastr.error(res.msg)
                }
            })
        }
    },
})

+ 161 - 0
app/statistics/css/blessing-analysis.css

@ -0,0 +1,161 @@
* {
    box-sizing: border-box;
}
.bgc-f2f3f5 {
    background-color: #f2f3f5;
}
.el-input__inner {
    height: 28px;
    line-height: 28px;
    width: 180px;
}
.el-input__icon {
    line-height: 28px;
}
.selectYear {
    padding: 20px;
}
.flex-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.leftBlock {
    border-right: 1px solid rgba(255,255,255,0.4);
    height: 100%;
    width: 40%;
    padding-top: 20px;
}
.bottomBorder{
    border-bottom: 1px solid rgba(255,255,255,0.4);
}
.rightBlock{
    height: 100%;
    width: 60%;
}
.rightBlock .top,.rightBlock .bottom{
    height: 50%;
}
.percent{
    padding-top: 35px;
}
.mainBlocktop {
    width: 480px;
    height: 195px;
    background-image: linear-gradient(90deg,
            #5a83ff 0%,
            #1954fd 100%),
        linear-gradient(#f36161,
            #f36161);
    background-blend-mode: normal,
        normal;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
}
.mainBlockbottom {
    width: 480px;
    height: 195px;
    font-size: 16px;
    background-image: linear-gradient(90deg,
            #ff8145 0%,
            #ffba78 100%),
        linear-gradient(90deg,
            #5a83ff 0%,
            #1954fd 100%),
        linear-gradient(#f36161,
            #f36161);
    background-blend-mode: normal,
        normal,
        normal;
    border-radius: 6px;
    color: #fff;
}
.bottomTable{
    border-radius: 6px;
}
.bottomTable .title{
    padding-left: 16px;
    letter-spacing: 0px;
}
.bgc-ebebf5{
    background-color: #ebebf5;
}
.area-tab span,.panelTop{
    height: 60px;
    font-size: 18px;
    color: #333;
}
.panelTop{
    line-height: 60px;
}
.bottom-list-table{
    margin-top: 18px;
}
.bottom-list-table thead{
    background-color: rgba(23, 179, 236, 0.1);
}
.bottom-list-table td{
    border-bottom: none;
}
.bottom-list-table tbody>tr,td{
    border-bottom: none;
}
.bottom-list-table td,.bottom-list-table th{
    border: 1px solid #e1e1e1;;
}
.bottom-list-table th{
    font-weight: normal;
    color: #333;
}
.bottom-list-table {
    border-collapse:collapse;
}
.toJump:hover{
    color: #12b7f5;
    border-bottom: 1px solid #12b7f5;
    cursor: pointer;
}
.bottom-list-table tbody>tr:hover {
	background-color: #fff;
}
.bottom-list-table thead tr,.bottom-list-table tr{
    height: 50px;
    font-size: 16px;
}
.shadow {
    position: absolute;
    left:104px;
    top: 34px;
    background-color: rgba(50, 50, 50, 0.701961);
    border-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-family: sans-serif;
    border-radius: 4px;
    padding: 5px;
    visibility: hidden;
    min-width: 310px;
    z-index: 99999;
    text-align: left;
}
.shadowTop{left: 88px;min-width: 300px;}
.panelTop .vam{
    vertical-align: top;
    margin: 10px 0 0 10px;
}

+ 125 - 0
app/statistics/html/blessing-analysis.html

@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>祝福分析</title>
    <meta name="author" content="yihu.com" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/element-ui.css" />
    <link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" href="../css/blessing-analysis.css">
</head>
<body style="margin: 0;">
    <div id="main" class="c-hide"  v-loading.fullscreen.lock="isloading">
        <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isopen="isopen"></header-tab>
        <!-- 年份选择 -->
        <div class="bgc-f2f3f5 selectYear">
            <label class="c-333 c-f14" for="">时间:</label>
            <el-select v-model="chooseYear" @change="selectChange">
                <el-option v-for="(item , index) in years" :label="item" :value="item"></el-option>
            </el-select>
        </div>
        <!-- 百分比 折线图-->
        <div class="flex-box">
            <div class="ml20">
                <div class="flex-box mainBlocktop">
                    <div class="leftBlock" style="position: relative;">
                        <div class="pl20">发送率
                            <img  @mouseenter="jumpTip(1)" @mouseleave="leaveTip(1)" src="../../../images/wenhao.png" alt="" class="tip">
                        </div>
                        <div id="shadow1" class="shadow shadowTop">发送率=已发送生日祝福的居民量/生日居民量</div>
                        <div class="c-f28 c-t-center percent">{{sendRate}}</div>
                    </div>
                    <div class="rightBlock">
                        <div class="top bottomBorder">
                            <div class="pt20 pl20">
                                已发送量
                            </div>
                            <div class="c-t-center c-f22">
                                {{sendCount}}
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="pt20 pl20">
                                生日居民量
                            </div>
                            <div class="c-t-center c-f22">{{total}}</div>
                        </div>
                    </div>
                </div>
                <div class="flex-box mainBlockbottom mt10">
                    <div class="leftBlock" style="position: relative;">
                        <div class="pl20">未发送率
                            <img  @mouseenter="jumpTip(2)" @mouseleave="leaveTip(2)" src="../../../images/wenhao.png" alt="" class="tip">
                        </div>
                        <div id="shadow2" class="shadow">未发送率=未发送生日祝福的居民量/生日居民量</div>
                        <div class="c-f28 c-t-center percent">{{noSendRate}}</div>
                    </div>
                    <div class="rightBlock">
                        <div class="top bottomBorder">
                            <div class="pt20 pl20">
                                未发送量
                            </div>
                            <div class="c-t-center c-f22">
                                {{noSendCount}}
                            </div>
                        </div>
                        <div class="bottom">
                            <div class="pt20 pl20">
                                生日居民量
                            </div>
                            <div class="c-t-center c-f22">{{total}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 折线图 -->
            <line-chart v-on:getlinedata="getNewLineData" lineid="lineChart" class="mlr8"></line-chart>
        </div>
        <!-- 底部表格 -->
        <div class="c-border bottomTable m20 mb0">
            <div class="c-f16 c-333 title ptb20">未发送生日祝福分析</div>
            <!-- 底部区域图 -->
            <area-data-panel class="mlr8" v-on:getnewdata="getAreaData"></area-data-panel>
            <div class="tableBlock">
            </div>
        </div>
        <!--模态框组件-->
        <vuedals></vuedals>
    </div>
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/element-ui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../plugins/toastr/toastr.min.js"></script>
    <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
    <!--<script src="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/line-chart2.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/area-data-panel3.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/sign-progress-filter.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/blessing-analysis.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

+ 400 - 0
app/statistics/js/blessing-analysis.js

@ -0,0 +1,400 @@
var reqList = []; //记录请求的参数和url,用于后退时使用
Vue.use(Vuedals.default);
new Vue({
	el: "#main",
	data: {
		appname: "祝福分析",
		years: [],
		isback: true,
		isrefresh: true,
		isopen: false,
		//请求页面所需参数
		level: '',
		area: '',
		areaTitle: '',
		index: '3',
		selectedDateType: 3, //折线图坐标值1-日,2-周,3-月
		endDate: '',
		startDate: '',
		lowLevel: '',
		lowCode: '',
		chooseYear: '',
		userRole: '',
		analysisType: "1", // 筛选维度的id, 1-按任务,2-按人口,3-高血压,4-糖尿病,5-65岁以上人群
		analysisName: "按任务",
		signRateData: {
			signRateText: "",
			signRate: "",
			signAmount: "",
			signRateAll: "",
			completeRateText: "",
			completeRate: "",
			completeAmount: "",
			completeRateAll: ""
		},
		sendRate:null,
		noSendRate:null,
		sendCount:null,
		noSendCount:null,
		total:null,
		yearHtml: "",
		contentHtml: "",
		isloading:false,
	},
	components: {
		vuedals: Vuedals.Component
	},
	methods: {
		getNewLineData: function (arg) {
			this.selectedDateType = arg.dateType;
			loadData([1], this);
		},
		selectChange: function () {
			var vm=this
			vm.startDate = getStartDate(vm.chooseYear);
			vm.endDate = getEndDate(vm.chooseYear);		
			//请求参数重置,页面类型重新开始
			vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
			vm.area = vm.userRole.code;
			vm.areaTitle = vm.userRole.name;
			EventBus.$emit('update-area-name', {
				areaName: vm.areaTitle
			});
			//然后清空请求列表数组
			reqList.splice(0, reqList.length);
			loadData([0, 1, 2], vm); //刷新数据
			//存储请求所带的参数
			reqList.push({
				level: vm.level,
				area: vm.area,
				areaTitle: vm.areaTitle,
				index: vm.index,
				endDate: vm.endDate,
				startDate: vm.startDate,
				lowLevel: vm.lowLevel,
				lowCode: vm.lowCode,
				analysisType: vm.analysisType
			});
			EventBus.$emit('update-statistics-year', {
				selectDate: vm.chooseYear + "年"
			}); //更新年份
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
		},
		getAreaData: function (arg) {
			//如果level改变,则需要重新加载整个页面的数据,否则只需加载底部区域数据
			if (arg.level == this.level) {
				this.lowLevel = arg.lowLevel;
				loadData([2], this);
			} else {
				this.level = arg.level;
				this.lowLevel = arg.lowLevel;
				this.area = arg.area;
				this.areaTitle = arg.areaTitle;
				loadData([0, 1, 2], this);
			}
			EventBus.$emit('update-area-name', {
				areaName: this.areaTitle
			});
			//存储请求所带的参数
			reqList.push({
				level: this.level,
				area: this.area,
				areaTitle: this.areaTitle,
				index: this.index,
				endDate: this.endDate,
				startDate: this.startDate,
				lowLevel: this.lowLevel,
				lowCode: this.lowCode,
				analysisType: this.analysisType,
			})
		},
		jumpTip: function (tab) {
			$('#shadow' + tab).css("visibility", "visible")
		},
		leaveTip: function (tab) {
			$('#shadow' + tab).css("visibility", "hidden")
		},
	},
	mounted: function () {
		//初始化数据
		initData(this);
		// 初始化年份
		initYear(this)
		//获得顶部各tab的值
		loadData([0, 1, 2], this); //参数组数表示请求的区域为上中下
		//存储请求所带的参数
		reqList.push({
			level: this.level,
			area: this.area,
			areaTitle: this.areaTitle,
			index: this.index,
			endDate: this.endDate,
			startDate: this.startDate,
			lowLevel: this.lowLevel,
			lowCode: this.lowCode,
			analysisType: this.analysisType
		});
		//设置监听器, 监听折线图日期变化
		var vm = this;
		//监听后退按钮的操作
		EventBus.$on("back-click", function (arg) {
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
			if (reqList.length == 1) {
				history.go(-1);
			} else {
				var preInfo = reqList.pop();
				var info = reqList[reqList.length - 1];
				vm.level = info.level;
				vm.area = info.area;
				vm.areaTitle = info.areaTitle;
				vm.lowLevel = info.lowLevel;
				vm.index = info.index;
				vm.lowCode = info.lowCode;
				loadData([0, 1, 2], vm);
				EventBus.$emit('update-area-name', { areaName: vm.areaTitle });
			}
		});
		//监听页面刷新
		EventBus.$on("refresh-click", function (arg) {
			EventBus.$emit('update-statistics-time', {}); //更新统计时间
			loadData([0, 1, 2], vm);
		});
		$("#main").removeClass("c-hide");
	}
})
function initData(vm) {
	//获得缓存中缓存的角色权限
	var userRole = window.sessionStorage.getItem("selectedRole");
	if (!userRole) {
		return false;
	}
	vm.userRole = JSON.parse(userRole);
	vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
	vm.area = vm.userRole.code;
	vm.areaTitle = vm.userRole.name;
	var now = new Date();
	if (now.getMonth() >= 6) {
		vm.chooseYear = now.getFullYear();
	} else {
		vm.chooseYear = now.getFullYear() - 1;
	}
	vm.startDate = getStartDate(vm.chooseYear);
	vm.endDate = getEndDate(vm.chooseYear);
	//更新头部信息
	EventBus.$emit('update-all-prompt-info', {
		areaName: vm.areaTitle,
		selectDate: vm.chooseYear + "年",
		dimensionVal: vm.analysisName
	});
}
function initReqParams(vm) {
	vm.index = 13;
	if (vm.lowCode) {
		vm.index = 17;
	}
	reqParam = [{
		url: "/statistics/article_total",
		reqType: 'get',
		data: {
			index:'98,99',
			level: vm.level,
			area: vm.area,
			year: vm.chooseYear,
			endDate: vm.endDate,
			startDate: vm.startDate,
		}
	}, {
		url: "/statistics/interval",
		reqType: 'get',
		data: {
			index: '99',
			level: vm.level,
			area: vm.area,
			startDate: vm.startDate,
			endDate: vm.endDate,
			interval: vm.selectedDateType,
		}
	}, {
		url: "/statistics/birthday_lowlevel_total",
		reqType: 'get',
		data: {
			sort: 1,
			endDate: vm.endDate,
			level: vm.level,
			area: vm.area,
		}
	}];
	if (vm.lowLevel) {
		reqParam[2].data.lowLevel = vm.lowLevel;
	}
	return reqParam;
}
function initYear(vm) {
	var now = new Date(),
		year = now.getFullYear();
	if (now.getMonth() < 6) {
		year--;
	}
	for (i = year; i >= 2018; i--) {
		vm.years.push(i);
	}
}
function getTopTagDatas(data, vm) {
		// 指标98已发送,99未发送
		vm.total=parseFloat(data.index_98+data.index_99)
		vm.sendCount=data.index_98
		vm.noSendCount=data.index_99
		vm.sendRate=vm.total!=0?data.index_98 / vm.total *100 +'%':'0%'
		vm.noSendRate=vm.total!=0?data.index_99 / vm.total *100 +'%':'0%'	
	window.onresize = function () {
		window.lineCharts.resize(); //日周月折线图
	}
}
function loadData(loadArr, vm) {
	//获取其他请求的参数
	var reqParams = initReqParams(vm),
		reqPromise = [],
		newArr = []; //记录非顶部请求的请求数组
	for (i = 0; i < loadArr.length; i++) {
		var j = loadArr[i];
		var param = reqParams[j];
		reqPromise.push(httpRequest.get(param.url, {
			data: param.data
		}));
		newArr.push(loadArr[i]);
	}
	vm.isloading=true    
	if (reqPromise.length > 0) {
		Promise.all(reqPromise).then(function (ress) {
		vm.isloading=false
			var res1, res2, res3;
			for (var i = 0; i < loadArr.length; i++) {
				var j = loadArr[i] + 1;
				if (j == 1) {
					res1 = ress[i];
				}
				if (j == 2) {
					res2 = ress[i];
				}
				if (j == 3) {
					res3 = ress[i];
				}
			}
			if (res1 && res1.status == 200) {
				getTopTagDatas(res1.data, vm);
			}
			if (res2 && res2.status == 200) {
				handleSecondPanelData(res2.data, vm);
			}
			if (res3) {
				if (res3.status == 200) {
					listHandle(res3.data, vm);
				} else {
					console.log(res3.msg);
				}
			}
		})
	}
}
function handleSecondPanelData(data, vm) {
	var xDatas = [],
		yDatas = [],
		names = [],
		colors = ['#12b7f5'],
		index_names = {
			'index_99': '未发送量'
		};
	for (var p in data) {
		names.push(index_names[p]);
		var xData = _.map(data[p], function (o) {
			return o.range;
		});
		var yData = _.map(data[p], function (o) {
			return o.amount;
		});
		xDatas.push(xData);
		yDatas.push(yData);
	}
	EventBus.$emit("draw-line-chart", {
		panelName: "未发送量趋势分析",
		quotaNames: names,
		xData: xDatas[0],
		yDatas: yDatas,
		colors: colors,
		markLineValue: null,
		markLineName: "目标量",
		endDate:vm.endDate,
		startDate:vm.startDate
	});
}
function listHandle(data, vm) {
	for (i in data) {
		var list = data[i];
		var topArr = [];
		topArr = soreRank(getKeyValueArr(list, 'notPushNum'));
		var arr = _.map(list, function (o, index) {
			var cols = [];
			cols.push(topArr[index])
			cols.push(o.name)
			cols.push(o.notPushNum)
			cols.push(o.amount)
			cols.push(o.notPushRate)
			return {
				rank: topArr[index],
				code: o.code,
				name: o.name,
				cols: cols
			}
		});
		var headers = ["排名", "各区", "未发送量", "生日居民", "未发送率"]; //analysisType=2 为按人口
		if (vm.lowLevel == 2 || vm.level == 3) {	//社区
			headers = ["排名", "社区", "未发送量", "生日居民", "未发送率"];
		}
		if (vm.lowLevel == 1 || vm.level == 2) { //团队
			headers = ["排名", "团队", "未发送量", "生日居民", "未发送率"];
		}
		EventBus.$emit("render-area-data", {
			level: vm.level,
			area: vm.area,
			lowLevel: vm.lowLevel,
			headers: headers,
			rows: arr,
			reqList:reqList
		});
	}
}
//获取结束时间
function getEndDate(chooseYear) {
	chooseYear = parseInt(chooseYear);
	var endDate = new Date((chooseYear + 1) + '-06-29'),
		now = new Date();
	var yesterday = new Date(now.setDate(now.getDate() - 1))
	if (yesterday <= endDate) {
		return yesterday.format("yyyy-MM-dd");
	} else {
		return (chooseYear + 1) + '-06-29';
	}
}

+ 7 - 1
app/statistics/js/home.js

@ -50,7 +50,13 @@ new Vue({
			label: '长处方分析',
			url: 'prescription-analysis.html',
			allowArea:"",
		}, {
		},{
			photo: '../../../images/zhufufenxi_icon_pc.png',
			label: '祝福分析',
			url: 'blessing-analysis.html',
			allowArea:"",	
		},
		 {
			photo: '../../../images/shangmenfuwu_icon.png',
			label: '上门服务',
			url: 'smfw-analysis.html',

+ 122 - 0
component/statistics/area-data-panel3.js

@ -0,0 +1,122 @@
(function(){
    Vue.component('area-data-panel',{
        template: `<div class="area-panel">\
                <div class="ui-grid bgc-ebebf5 panelTop">\
                    <img v-show="reqList.length!=1" @click="back" src="../../../images/fanhui_icon.png" width="18" height="18" class="mr10 vam">\
                    <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && (!lowLevel || lowLevel==3)}" @click="getLowCodeData(3)"><span>各区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': (level==3 && lowLevel!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                    <div v-show="showTeamTab" class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><span>团队</span></div>\
                </div>\
                <table class="bottom-list-table mb20" id="listTable">\
                    <thead><tr>\
                        <th v-for="th in headers">{{th}}</th>\
                    </tr></thead>\
                    <tbody>\
                        <tr v-for="row in rows" class="data-row">\
                            <td v-for="(col, index) in row.cols">\
                                <span v-if="index==1&&level>2 && lowLevel != 1" :class="{\'toJump\':(index==1&&level>2 && lowLevel != 1)}" @click="getLowLeverData(row)">{{col}}</span>
                                <span v-else>{{col}}</span>\
                            </td>\
                        </tr>\
                    </tbody>\
                </table>\
            </div>`,
        props:[],
        data: function(){
            return {
                level: '',
                lowLevel: '',
                area: '',
                headers: [],
                rows: [],
                cityLevelNoShowTeamTab: false,
                districtLevelNoShowTeamTab: false,
                reqList:[]
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("render-area-data", function(arg){
                vm.level = arg.level;
                vm.lowLevel = arg.lowLevel;
                vm.area = arg.area;
                vm.headers = arg.headers;
                vm.rows = arg.rows;
                vm.cityLevelNoShowTeamTab = arg.cityLevelNoShowTeamTab;
                vm.districtLevelNoShowTeamTab = arg.districtLevelNoShowTeamTab;
                vm.reqList=arg.reqList
            })
        },
        computed: {
            showTeamTab: function(){
                if(this.cityLevelNoShowTeamTab){
                    if(this.level == 4){
                        return false;
                    }else{
                        if(this.districtLevelNoShowTeamTab){
                            if(this.level == 3){
                                return false;
                            }else{
                                return true;
                            }
                        }else{
                            return true;
                        }
                    }
                }else{
                    return true;
                }
            }
        },
        methods: {
            getLowLeverData: function(row){
                if(this.level > 2 && this.lowLevel != 1){
                    //跳转去下一级数据
                    if(this.lowLevel && (this.level - this.lowLevel) >= 2){
                        //从次级tab的内容查看再下一级的数据
                        this.level = this.level - 2;
                        this.lowLevel --;
                    }else{
                        this.level --;
                        this.lowLevel = '';
                    }
                    this.area = row.code;
                    this.areaTitle = row.name;
                    //触发组件监听事件,去父页面请求新的数据
                    this.$emit("getnewdata", {
                        level: this.level,
                        area: this.area,
                        areaTitle: this.areaTitle,
                        lowLevel: this.lowLevel,
                    });
                }else{
                    // //弹框显示团队信息
                    // Vuedals.Bus.$emit('new', {
                    //     title: '团队信息',
                    //     component: 'team-info',
                    //     props: {
                    //         teamId: row.code
                    //     }
                    // });
                }
            },
            back:function(){
                EventBus.$emit('back-click', {});
            },    
            getLowCodeData: function(code){
                if(code == 3){
                    this.lowLevel = '';
                }else{
                    this.lowLevel = code;
                }
                
                //触发组件监听事件,去父页面请求新的数据
                this.$emit("getnewdata", {
                    level: this.level,
                    area: this.area,
                    lowLevel: this.lowLevel
                });
            }
        }
    });
})()

+ 256 - 0
component/statistics/line-chart2.js

@ -0,0 +1,256 @@
(function(){
    var startDate,
        endDate,
        chooseYear;
    Vue.component('line-chart',{
        template: '<div class="mtb10 bgc-fff c-border pb10" style="width:100%;height:400px;border-radius:6px;">\
            <div class="ui-grid ui-grid-middle plr15 p20">\
                <div class="ui-col-1">\
                    <span class="c-333 c-f16">{{panelName}}</span>\
                </div>\
                <div v-if="!showDatePanel" class="ui-col-1 c-f16 c-333 c-t-right"><span>{{startDate}}</span> ~ <span>{{endDate}}</span></div>\
            </div>\
            <div class="ui-grid ui-grid-middle mt5 plr10">\
                <div v-if="showDatePanel" class="ui-col-1" >\
                    <span>数据时间:</span>\
                    <el-date-picker\
                      v-model="dateValue"\
                      type="daterange"\
                      align="right"\
                      unlink-panels\
                      range-separator="至"\
                      start-placeholder="开始日期"\
                      end-placeholder="结束日期"\
                      :default-value="defaultValue"\
                      :picker-options="pickerOptions2"\
                      @change="dateChange"\
                    >\
                    </el-date-picker>\
                </div>\
            </div>\
            <div class="line-chart" :id="lineid" style="height: 300px; width: 100%;"></div>\
        </div>',
        props:['lineid', 'showDatePanel', "chooseYear"],
        data: function(){
            return {
                selectedDateType: 3,
                startDate: "", //数据展示时显示的开始时间
                endDate: "", //数据展示时显示的结束时间
                panelName: "",
                unit: "人",
                dateValue: "",
                defaultValue: [],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function(picker) {
                          var end = new Date();
                          var start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function(picker) {
                          var end = new Date();
                          var start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                          picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function(picker) {
                          var end = new Date();
                          var start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                          picker.$emit('pick', [start, end]);
                        }
                    }],
                    disabledDate: function(d){
                        var start = new Date(getStartDate(chooseYear)+" 00:00:00"),
                            end = new Date(getEndDate(chooseYear)+" 23:59:59");
                        return d < start || d > end;
                    }
                }
            }
        },
        methods: {
            changeType: function(type){
                this.selectedDateType = type;
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
                this.$emit("getlinedata", {dateType: type});
            },
            dateChange: function(val){
                var start = val[0].format("yyyy-MM-dd"),
                    end = val[1].format("yyyy-MM-dd");
                this.$emit("getlinedata", {dateType: this.selectedDateType, dateValue: [start, end]});
            }
        },
        mounted: function(){
            var vm = this;
            EventBus.$on("draw-line-chart", function(arg){
                vm.panelName = arg.panelName;
                if(arg.selectedDateType){
                    vm.selectedDateType = arg.selectedDateType;
                }
                if(arg.unit){
                    vm.unit = arg.unit;
                }
                vm.dateValue = arg.dateValue;
                vm.chooseYear = arg.chooseYear;
                chooseYear = arg.chooseYear;
                drawLine(vm, arg);
            })
            
            EventBus.$on("change-date-value", function(arg){
                this.defaultValue = arg;
            })
            // vm.changeType(3)
        }
    });
    
    function drawLine(vm, arg){
        var lineCharts = echarts.init(document.getElementById(vm.lineid));
        var xData = arg.xData,
            yDatas = arg.yDatas,
            names = arg.quotaNames,
            colors = arg.colors,
            markLineValue = arg.markLineValue,
            markLineName = arg.markLineName;
        //处理数据, 数据按照20条数一屏展示
//      var lastIndex = xData.length % 20;
        if(xData.length > 20 ){  
            dataZoom_end = 100-(19/xData.length)*100;  
        }else{  
            dataZoom_end = 0;
        }
        //初始结束时间
        var lastValue = xData[xData.length - 1];
        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
            vm.endDate = lastValue;
        }else if(vm.selectedDateType == 3){
            var val = lastValue.substr(5,2)+"月"
            vm.endDate = arg.endDate;
            vm.startDate=arg.startDate
        }
        var options = {
            tooltip: {
                trigger: 'axis'
            },
            color: colors,
            grid: {
                show: false,
                left: '20px',
                right: '20px',
                bottom: '40px',
                top: '20px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
                        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
                            // if(index == 0){
                            //     vm.startDate = value;
                            //     return value.substr(5,2)+"月"+value.substr(8,2);
                            // }else{
                            //     if(index == 19){
                            //         vm.endDate = value;
                            //     }
                            //     return value.substr(8,2);
                            // }
                        }else if(vm.selectedDateType == 3){
                            var val = value.substr(5,2)+"月"
                            if(index == 0){
                                // vm.startDate = value;
                            }else{
                                if(index == 19){
                                    vm.endDate = value;
                                }
                            }
                            return val;
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                },
                scale: true,
                minInterval: 1,
                boundaryGap: ['10%', '30%'],
                splitLine: {show:false}
            },
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: false,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: false,
            }]
        };
        var series = [];
        for(var i=0; i<yDatas.length; i++){
            var obj = {
                name: names[i],
                type: 'line',
                smooth: true,
                data: yDatas[i],
                lineStyle:{
                    normal:{
                        color: colors[i]
                    }
                }
            };
            series.push(obj);
        }
        options.series = series;
        if(markLineValue){ 
            //目前统计只有签约统计页面有目标量
            $.extend(options.yAxis, {
                min: function(value) {
                    if(value.min > markLineValue){
                        return markLineValue / 2;
                    }else{
                        return value.min / 2;
                    }
                },
                max: function(value){
                    if(value.max > markLineValue){
                        return parseInt(value.max * 1.5);
                    }else{
                        return parseInt(markLineValue * 1.2);
                    }
                }
            });
            $.extend(options.series[0], {markLine: {
                    data:[
                        {yAxis: markLineValue, name: markLineName}
                    ],
                    label:{
                        show: true,
                        position: 'middle',
                        formatter: '{b}: {c}'
                    },
                    lineStyle:{
                        color: 'rgb(194,53,49)'
                    }
            }});
        }
//          console.log(JSON.stringify(options));
        $("#"+vm.lineid).removeAttr('_echarts_instance_')
        lineCharts.setOption(options);
        window.lineCharts = lineCharts;
    }
})()

BIN
images/wenhao.png


BIN
images/zhufufenxi_icon_pc.png