8月14，体重血压分析的页面

src/router/modules/Dialysisanalysis.js

@@ -32,6 +32,17 @@ export default {
         noCache: true
       }
     },
+    // {//体重血压质控
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/index'),
+    //   name: 'weightblood',
+    //   meta: {
+    //     title: '体重血压分析',
+    //     noCache: true
+    //   }
+    // },
+
+
     {//透析总量分析
       path: '/Dialysisanalysis/qualitycontrol/new_otherIndicators/Total_analysis',
       component: () => import('@/xt_pages/Dialysisanalysis/new_otherIndicators/components/Total_analysis'),
@@ -88,6 +99,97 @@ export default {
       is_menu: false
     },
 
+    // 体重血压
+    // {//干体重分析
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/dry_weight',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/dry_weight'),
+    //   name: 'dry_weight',
+    //   meta: {
+    //     title: '患者干体重分析',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//上次透析分母
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/list_denominator',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/list_denominator'),
+    //   name: 'list_denominator',
+    //   meta: {
+    //     title: '患者体重增长分析(以上次透后体重为分母)',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//干体重分母
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/dry_denominator',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/dry_denominator'),
+    //   name: 'dry_denominator',
+    //   meta: {
+    //     title: '患者体重增长分析(以干体重为分母)',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//患者透后体重分析
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/dialyze_after',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/dialyze_after'),
+    //   name: 'dialyze_after',
+    //   meta: {
+    //     title: '患者透后体重分析',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//患者体重详情
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/weight_table',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/weight_table'),
+    //   name: 'weight_table',
+    //   meta: {
+    //     title: '患者体重详情',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//透前血压分析
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/before_Blood',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/before_Blood'),
+    //   name: 'before_Blood',
+    //   meta: {
+    //     title: '透前血压分析',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//透前血压分析
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/after_Blood',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/after_Blood'),
+    //   name: 'after_Blood',
+    //   meta: {
+    //     title: '透后血压分析',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+    // {//患者血压详情
+    //   path: '/Dialysisanalysis/qualitycontrol/weightblood/blood_table',
+    //   component: () => import('@/xt_pages/Dialysisanalysis/weightblood/components/blood_table'),
+    //   name: 'blood_table',
+    //   meta: {
+    //     title: '透后血压分析',
+    //     noCache: true
+    //   },
+    //   hidden: true,
+    //   is_menu: false
+    // },
+
+
 
     {
       path: '/Dialysisanalysis/qualitycontrol/Indicatorsdetail',

src/xt_pages/Dialysisanalysis/weightblood/components/after_Blood.vue

@@ -0,0 +1,715 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者透后血压分析</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div style="margin:0 10px">
+            <el-date-picker
+              v-model="start_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              v-model="end_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+          </div>
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <div ref="mychart">
+          <div class="echart" id="mychart"  style="width:100%;height:60vh"></div>
+        </div>
+
+          <div style="position: fixed;right: 5%;top: 50vh;">
+            <el-popover
+              placement="left"
+              title="提示"
+              width="500"
+              trigger="click"
+              content="1.统计时间段内留治患者干体重，在当前时间段的区间分布，不是统计每次透析的干体重。
+                       2.如果一个患者在时间段内，调整过两次干体重，以最后一次为准。">
+              <img src="@/assets/img/xiang.png" alt="" style="height: 20px;width: 20px;" slot="reference">
+              <!-- <el-button slot="reference">click 激活</el-button> -->
+            </el-popover>
+          </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="提示"
+        :visible.sync="complete_dialog"
+        width="80%">
+        <div>
+          <div style="display: flex;margin-bottom: 20px;">
+            <div style="flex: 2;display: flex;">
+              <div>
+                日期：
+                <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                  <el-option
+                    v-for="item in date_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div style="margin:0 10px">
+                <el-date-picker
+                  v-model="start_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="end_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+              </div>
+
+              <div>
+                状态:
+                <el-select v-model="status_value" placeholder="请选择" style="width: 130px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in status_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div style="flex: 1;">
+              <div>
+                <el-button type="primary" @click="detil_click">查询</el-button>
+
+                <el-button type="primary" @click="derive_click">导出</el-button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <el-table :data="tableData"
+              border
+              style="width: 100%;"
+              :header-cell-style = "{'text-align':'center'}"
+              :cell-style="{'text-align':'center'}"
+              height="380">
+              <el-table-column
+                prop="index"
+                label="序号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_no"
+                label="透析号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="patient_name"
+                label="患者姓名">
+              </el-table-column>
+              <el-table-column
+                prop="age"
+                label="年龄">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_date"
+                label="透析日期"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_date"
+                label="透后血压"
+                width="">
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="text-align:right;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50,100, 200, 300, 400]"
+              :page-size="limit"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="complete_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="complete_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialysistreatfinish,Getdialysistreatdetail} from '../../../../api/qcd'
+import {getAllNurseList} from '@/api/fallassement'
+import { getAllDoctorList} from "@/api/device"
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        status_value:0,
+        complete_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        // status_options:[],
+        nurseList:[],
+        operators:[],
+        docList:[],
+        status_options:[{value:1,label:'达到透析处方时间'},{value:2,label:'超出处方时间'},{value:3,label:'未到达处方时间'}],
+        // status_options:[{value:1,label:'待定卧床'},{value:2,label:'<40KG'},{value:3,label:'40-50KG'},
+        //                 {value:4,label:'50-60KG'},{value:5,label:'<60-70KG'},{value:6,label:'>70KG'}
+        //                 ],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        mode_options:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id: 15, name: 'HD前置换' },{ id: 16, name: 'HD后置换' },{ id: 17, name: 'HDF前置换' },{ id: 18, name: 'HDF后置换' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+        status_id:"",
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params={
+          start_date:this.start_date,
+          end_date:this.end_date
+        }
+        Getdialysistreatfinish(params).then(response =>{
+          if(response.data.state ==1){
+            const list = response.data.data.data
+            const xAxis = []
+            const yAxis = []
+
+            const total = response.data.data.total
+            for(let key in list){
+              const obj={
+                name:key,
+                value:list[key]
+              }
+              xAxis.push(obj)
+              yAxis.push(key)
+            }
+            const status = []
+            // for(let i in yAxis){
+            //   const obj ={
+            //     value:(i*1)+1,
+            //     label:yAxis[i]
+            //   }
+            //   status.push(obj)
+            // }
+            // this.status_options = status
+            console.log('this.status_options',this.status_options);
+            const option = {
+                title:{
+                  text:'总数'+total,
+                  left:'5%',
+                  bottom:'5%',
+                  textStyle:{
+                    fontSize:30
+                  }
+                },
+                tooltip: {
+                  trigger: 'item',
+
+                },
+                legend: {
+                  data:yAxis,
+                  left: '10%',
+                  top: '30%',
+                  orient: 'vertical'
+                },
+                color:['#FFD7C0','#9FBDFC',"#A9E0F3", "#FF9994",'aquamarine','gold'],
+                series: [
+                  {
+                    name: '',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: true,
+                    itemStyle: {
+                      borderRadius: 10,
+                      borderColor: '#fff',
+                      borderWidth: 2
+                    },
+                    label: {
+                      show: true,
+                      position: 'center',
+                      normal : {
+                        formatter: '{b}:{c}: ({d}%)',
+                        textStyle : {
+                          fontWeight : 'normal',
+                          fontSize : 15,
+                          color : "black"
+                        }
+                      }
+                    },
+                    emphasis: {
+                      label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                      }
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    data: xAxis
+                  }
+                ]
+              };
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.complete_dialog = true
+              console.log('bbbb',params);
+              var status_id =''
+              for(let i in this.status_options){
+                if(params.data.name == this.status_options[i].label){
+                  status_id = this.status_options[i].value
+                }
+              }
+              this.getdetail(status_id)
+            })
+          }
+        })
+
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      detil_click(){
+        this.getdetail(this.status_value)
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          const blob = this.dataURLtoBlob(imageUrl)
+          const url = URL.createObjectURL(blob);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析完成率统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 导出excel
+      derive_click(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '年龄','透析日期', '处方透析时长', '实际透析时长', '实际差(min)', '主治医生', '主治护士']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.patient_name,
+            item.age,
+            item.dialysis_date,
+            item.dialysis_duration,
+            item.actual_duration,
+            item.diff,
+            item.doctor,
+            item.nurse,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析治疗完成率') // 工作簿名称
+        let name = '透析治疗完成率'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 详情数据源
+      getdetail(mode){
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+          mode:mode,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialysistreatdetail(params).then(response =>{
+          if(response.data.state){
+            const list = response.data.data.list
+            const xAxis = []
+            const table = []
+            list.forEach((item,index) =>{
+              const obj={
+                index:index+1,
+                dialysis_no:item.dialysis_no,
+                patient_name:item.patient_name,
+                age:this.analyzeIDCard(item.id_card_no),
+                dialysis_date:item.dialysis_date.split('T')[0],
+                dialysis_duration:item.dialysis_duration,
+                actual_duration:item.actual_duration,
+                diff:item.diff,
+                doctor:this.getdoctor(item.doctor),
+                nurse:this.getnurse(item.nurse)
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('55555',response);
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+       getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.getdetail(this.status_value)
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.getdetail(this.status_value)
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 计算年龄
+      analyzeIDCard(IDCard){
+        var age = 0,yearBirth,monthBirth,dayBirth;
+        //获取用户身份证号码
+        var userCard = IDCard;
+        //如果身份证号码为undefind则返回空
+        if(!userCard){
+          return age;
+        }
+        var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; //验证身份证号码的正则
+        if (reg.test(userCard)) {
+          if (userCard.length == 15) {
+              var org_birthday = userCard.substring(6, 12);
+              //获取出生年月日
+              yearBirth = "19" + org_birthday.substring(0, 2);
+              monthBirth = org_birthday.substring(2, 4);
+              dayBirth = org_birthday.substring(4, 6);
+              } else if (userCard.length == 18) {
+              //获取出生年月日
+              yearBirth = userCard.substring(6,10);
+              monthBirth = userCard.substring(10,12);
+              dayBirth = userCard.substring(12,14);
+
+            }
+            //获取当前年月日并计算年龄
+            var myDate = new Date();
+            var monthNow = myDate.getMonth() + 1;
+            var dayNow = myDate.getDate();
+            var age = myDate.getFullYear() - yearBirth;
+            if(monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)){
+              age--;
+            }
+            //返回年龄
+            return age;
+        } else {
+          return ''
+        }
+
+      },
+      // 护士
+      getAllNurseList(){
+        getAllNurseList().then(response=>{
+           if(response.data.state ==1){
+             var nurseList  = response.data.data.nurseList
+            console.log('0000',nurseList);
+             this.nurseList =nurseList
+           }
+        })
+      },
+      // 医生
+      getAllDoctorList(){
+        getAllDoctorList().then(response=>{
+          if(response.data.state == 1){
+              var list = response.data.data.list
+              console.log("list222222",list)
+              this.docList = list
+              this.operators = response.data.data.operators
+          }
+        })
+      },
+      getnurse(ids){
+        const nurse = this.nurseList
+        for(let i in nurse){
+          if(ids==nurse[i].admin_user_id){
+            return nurse[i].user_name
+          }
+        }
+      },
+      getdoctor(ids){
+        const doctor = this.docList
+        for(let i in doctor){
+          if(ids == doctor[i].admin_user_id){
+            return doctor[i].user_name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.getAllNurseList()
+      this.getAllDoctorList()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/before_Blood.vue

@@ -0,0 +1,715 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者透前血压分析</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div style="margin:0 10px">
+            <el-date-picker
+              v-model="start_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              v-model="end_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+          </div>
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <div ref="mychart">
+          <div class="echart" id="mychart"  style="width:100%;height:60vh"></div>
+        </div>
+
+          <div style="position: fixed;right: 5%;top: 50vh;">
+            <el-popover
+              placement="left"
+              title="提示"
+              width="500"
+              trigger="click"
+              content="1.统计时间段内留治患者干体重，在当前时间段的区间分布，不是统计每次透析的干体重。
+                       2.如果一个患者在时间段内，调整过两次干体重，以最后一次为准。">
+              <img src="@/assets/img/xiang.png" alt="" style="height: 20px;width: 20px;" slot="reference">
+              <!-- <el-button slot="reference">click 激活</el-button> -->
+            </el-popover>
+          </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="提示"
+        :visible.sync="complete_dialog"
+        width="80%">
+        <div>
+          <div style="display: flex;margin-bottom: 20px;">
+            <div style="flex: 2;display: flex;">
+              <div>
+                日期：
+                <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                  <el-option
+                    v-for="item in date_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div style="margin:0 10px">
+                <el-date-picker
+                  v-model="start_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="end_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+              </div>
+
+              <div>
+                状态:
+                <el-select v-model="status_value" placeholder="请选择" style="width: 130px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in status_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div style="flex: 1;">
+              <div>
+                <el-button type="primary" @click="detil_click">查询</el-button>
+
+                <el-button type="primary" @click="derive_click">导出</el-button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <el-table :data="tableData"
+              border
+              style="width: 100%;"
+              :header-cell-style = "{'text-align':'center'}"
+              :cell-style="{'text-align':'center'}"
+              height="380">
+              <el-table-column
+                prop="index"
+                label="序号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_no"
+                label="透析号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="patient_name"
+                label="患者姓名">
+              </el-table-column>
+              <el-table-column
+                prop="age"
+                label="年龄">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_date"
+                label="透析日期"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_date"
+                label="透前血压"
+                width="">
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="text-align:right;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50,100, 200, 300, 400]"
+              :page-size="limit"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="complete_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="complete_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialysistreatfinish,Getdialysistreatdetail} from '../../../../api/qcd'
+import {getAllNurseList} from '@/api/fallassement'
+import { getAllDoctorList} from "@/api/device"
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        status_value:0,
+        complete_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        // status_options:[],
+        nurseList:[],
+        operators:[],
+        docList:[],
+        status_options:[{value:1,label:'达到透析处方时间'},{value:2,label:'超出处方时间'},{value:3,label:'未到达处方时间'}],
+        // status_options:[{value:1,label:'待定卧床'},{value:2,label:'<40KG'},{value:3,label:'40-50KG'},
+        //                 {value:4,label:'50-60KG'},{value:5,label:'<60-70KG'},{value:6,label:'>70KG'}
+        //                 ],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        mode_options:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id: 15, name: 'HD前置换' },{ id: 16, name: 'HD后置换' },{ id: 17, name: 'HDF前置换' },{ id: 18, name: 'HDF后置换' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+        status_id:"",
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params={
+          start_date:this.start_date,
+          end_date:this.end_date
+        }
+        Getdialysistreatfinish(params).then(response =>{
+          if(response.data.state ==1){
+            const list = response.data.data.data
+            const xAxis = []
+            const yAxis = []
+
+            const total = response.data.data.total
+            for(let key in list){
+              const obj={
+                name:key,
+                value:list[key]
+              }
+              xAxis.push(obj)
+              yAxis.push(key)
+            }
+            const status = []
+            // for(let i in yAxis){
+            //   const obj ={
+            //     value:(i*1)+1,
+            //     label:yAxis[i]
+            //   }
+            //   status.push(obj)
+            // }
+            // this.status_options = status
+            console.log('this.status_options',this.status_options);
+            const option = {
+                title:{
+                  text:'总数'+total,
+                  left:'5%',
+                  bottom:'5%',
+                  textStyle:{
+                    fontSize:30
+                  }
+                },
+                tooltip: {
+                  trigger: 'item',
+
+                },
+                legend: {
+                  data:yAxis,
+                  left: '10%',
+                  top: '30%',
+                  orient: 'vertical'
+                },
+                color:['#FFD7C0','#9FBDFC',"#A9E0F3", "#FF9994",'aquamarine','gold'],
+                series: [
+                  {
+                    name: '',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: true,
+                    itemStyle: {
+                      borderRadius: 10,
+                      borderColor: '#fff',
+                      borderWidth: 2
+                    },
+                    label: {
+                      show: true,
+                      position: 'center',
+                      normal : {
+                        formatter: '{b}:{c}: ({d}%)',
+                        textStyle : {
+                          fontWeight : 'normal',
+                          fontSize : 15,
+                          color : "black"
+                        }
+                      }
+                    },
+                    emphasis: {
+                      label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                      }
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    data: xAxis
+                  }
+                ]
+              };
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.complete_dialog = true
+              console.log('bbbb',params);
+              var status_id =''
+              for(let i in this.status_options){
+                if(params.data.name == this.status_options[i].label){
+                  status_id = this.status_options[i].value
+                }
+              }
+              this.getdetail(status_id)
+            })
+          }
+        })
+
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      detil_click(){
+        this.getdetail(this.status_value)
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          const blob = this.dataURLtoBlob(imageUrl)
+          const url = URL.createObjectURL(blob);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析完成率统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 导出excel
+      derive_click(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '年龄','透析日期', '处方透析时长', '实际透析时长', '实际差(min)', '主治医生', '主治护士']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.patient_name,
+            item.age,
+            item.dialysis_date,
+            item.dialysis_duration,
+            item.actual_duration,
+            item.diff,
+            item.doctor,
+            item.nurse,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析治疗完成率') // 工作簿名称
+        let name = '透析治疗完成率'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 详情数据源
+      getdetail(mode){
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+          mode:mode,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialysistreatdetail(params).then(response =>{
+          if(response.data.state){
+            const list = response.data.data.list
+            const xAxis = []
+            const table = []
+            list.forEach((item,index) =>{
+              const obj={
+                index:index+1,
+                dialysis_no:item.dialysis_no,
+                patient_name:item.patient_name,
+                age:this.analyzeIDCard(item.id_card_no),
+                dialysis_date:item.dialysis_date.split('T')[0],
+                dialysis_duration:item.dialysis_duration,
+                actual_duration:item.actual_duration,
+                diff:item.diff,
+                doctor:this.getdoctor(item.doctor),
+                nurse:this.getnurse(item.nurse)
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('55555',response);
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+       getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.getdetail(this.status_value)
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.getdetail(this.status_value)
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 计算年龄
+      analyzeIDCard(IDCard){
+        var age = 0,yearBirth,monthBirth,dayBirth;
+        //获取用户身份证号码
+        var userCard = IDCard;
+        //如果身份证号码为undefind则返回空
+        if(!userCard){
+          return age;
+        }
+        var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; //验证身份证号码的正则
+        if (reg.test(userCard)) {
+          if (userCard.length == 15) {
+              var org_birthday = userCard.substring(6, 12);
+              //获取出生年月日
+              yearBirth = "19" + org_birthday.substring(0, 2);
+              monthBirth = org_birthday.substring(2, 4);
+              dayBirth = org_birthday.substring(4, 6);
+              } else if (userCard.length == 18) {
+              //获取出生年月日
+              yearBirth = userCard.substring(6,10);
+              monthBirth = userCard.substring(10,12);
+              dayBirth = userCard.substring(12,14);
+
+            }
+            //获取当前年月日并计算年龄
+            var myDate = new Date();
+            var monthNow = myDate.getMonth() + 1;
+            var dayNow = myDate.getDate();
+            var age = myDate.getFullYear() - yearBirth;
+            if(monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)){
+              age--;
+            }
+            //返回年龄
+            return age;
+        } else {
+          return ''
+        }
+
+      },
+      // 护士
+      getAllNurseList(){
+        getAllNurseList().then(response=>{
+           if(response.data.state ==1){
+             var nurseList  = response.data.data.nurseList
+            console.log('0000',nurseList);
+             this.nurseList =nurseList
+           }
+        })
+      },
+      // 医生
+      getAllDoctorList(){
+        getAllDoctorList().then(response=>{
+          if(response.data.state == 1){
+              var list = response.data.data.list
+              console.log("list222222",list)
+              this.docList = list
+              this.operators = response.data.data.operators
+          }
+        })
+      },
+      getnurse(ids){
+        const nurse = this.nurseList
+        for(let i in nurse){
+          if(ids==nurse[i].admin_user_id){
+            return nurse[i].user_name
+          }
+        }
+      },
+      getdoctor(ids){
+        const doctor = this.docList
+        for(let i in doctor){
+          if(ids == doctor[i].admin_user_id){
+            return doctor[i].user_name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.getAllNurseList()
+      this.getAllDoctorList()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/blood_table.vue

@@ -0,0 +1,600 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者血压详情</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;margin-bottom: 20px;">
+          <div style="flex: 2;display: flex;flex-wrap:wrap">
+            <div>
+              日期：
+              <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                <el-option
+                  v-for="item in date_options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div style="margin:0 10px;">
+              <el-date-picker
+                v-model="start_date"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+                style="width: 150px;">
+              </el-date-picker>
+              <span>-</span>
+              <el-date-picker
+                v-model="end_date"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+                style="width: 150px;">
+              </el-date-picker>
+            </div>
+            <div>
+              体重增长:
+              <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                <el-option :key="0" label="不限" :value="0"></el-option>
+                <el-option
+                  v-for="item in dialyze_options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+            
+          </div>
+          <div style="flex: 1;">
+            <div>
+              <el-button type="primary" @click="deil_click">查询</el-button>
+              <el-button type="primary" @click="exportExcel">导出</el-button>
+            </div>
+          </div>
+        </div>
+
+        <el-table :data="tableData" border style="width: 100%"
+        :header-cell-style="{textAlign: 'center'}"
+        :cell-style="{ textAlign: 'center' }"
+        height="380">
+          <el-table-column
+            prop="index"
+            label="序号"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="dialysis_no"
+            label="透析号"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="患者姓名">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="性别"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="年龄"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="透析日期"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="mode_name"
+            label="干体重"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="dialyszers"
+            label="超滤总量(L)">
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="实际超滤量(ml)"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="mode_name"
+            label="超滤滤"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="dialyszers"
+            label="透前血压">
+          </el-table-column>
+          <el-table-column
+            prop="dialyszers"
+            label="监测记录血压">
+          </el-table-column>
+          <el-table-column
+            prop="dialyszers"
+            label="透后血压">
+          </el-table-column>
+        </el-table>
+        <div style="text-align: right;margin-top: 10px;">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[50,100, 200, 300, 400]"
+            :page-size="limit"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+   
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialyzer,Getdialyzerdetail,Getdialyzerconfig} from '../../../../api/qcd'
+import { forEach } from 'jszip';
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        dialyze_value:0,
+        dialyze_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        dialyze_options:[],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        modearr:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+          { id:30, name:"血浆胆红素吸附+HP"},{ id:31, name:"HPD"},{ id:32, name:"HDP"},{ id:33, name:"HFD"},{ id:34, name:"HDF100"},
+          { id:35, name:"HDF600"},{ id:36, name:"HDF800"},{ id:37, name:"HDF1000"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+
+
+        input:'',
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+        }
+        Getdialyzer(params).then(response =>{
+          console.log('ressponse',response.data.data);
+          if(response.data.state ==1){
+            console.log('bbbbbbbbb',response.data.data);
+            const list = response.data.data.data
+            const xAxis =[]
+            const yAxis = []
+            list.forEach(item =>{
+
+              xAxis.push(item.name)
+              yAxis.push(item.count)
+            })
+            this.bar_xAxis = xAxis
+            const options = []
+            for(let i in xAxis){
+              const arr ={
+                id:i+1,
+                name:xAxis[i]
+              }
+              options.push(arr)
+            }
+            this.dialyze_options = options
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: xAxis,
+                axisLabel:{
+                  interval:0,
+                }
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  data:yAxis ,
+                  type: 'bar',
+                  barWidth: '25%',
+                  label: {
+                    normal: {
+                      show: true,
+                      position: 'top',
+                      formatter: '{c}',
+                      textStyle:{
+                        color: 'black',//字体颜色
+                        fontSize: 13//字体大小
+                      }
+                    },
+                  },
+                  itemStyle:{
+                    normal:{
+                      color:function (params){
+                        // const colorarr=['#FFA333','#A155E8','#6D91FF','#A233A2'];
+                        var colorarr = [["#A9E0F3", "#9FBDFC"],["#FFD7C0", "#FF9994"]]
+                        var index = params.dataIndex;
+                        if (params.dataIndex >= colorarr.length) {
+                          index = params.dataIndex % colorarr.length;
+                        }
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          { offset: 0, color: colorarr[index][0] },
+                          // { offset: 0.5, color: colorList[index][1] },
+                          { offset: 1, color: colorarr[index][1] }
+                        ]);
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.dialyze_dialog = true
+              console.log('vvvvv',params);
+              this.Getdialyzerdetail(params.name)
+            })
+          }
+
+        })
+
+      },
+      // 导出excel
+      exportExcel(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '透析日期','透析模式', '透析器']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.name,
+            item.date,
+            item.mode_name,
+            item.dialyszers,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析器使用统计') // 工作簿名称
+        let name = '透析器使用统计'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      deil_click(){
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          // console.log('5555',imageUrl);
+        //   // const base = this.url.split(',')[1]
+        //   // console.log('2222',base);
+          const blob = this.dataURLtoBlob(imageUrl)
+          // console.log('4444',blob);
+          const url = URL.createObjectURL(blob);
+          // const file = (this.url).blob();
+          // console.log('1111',url);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析器使用统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 详情数据源
+      Getdialyzerdetail(name){
+        const params={
+          dialyzer:name,
+          start_date:this.start_date,
+          end_date:this.end_date,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialyzerdetail(params).then(response =>{
+          if(response.data.state == 1){
+            const list = response.data.data.prescriptions
+            const table=[]
+            list.forEach((item,index)=>{
+              const obj ={
+                index:index+1,
+                dialysis_no:item.patient.dialysis_no,
+                name:item.patient.name,
+                date:this.getTime(item.record_date),
+                mode_name:this.getmode(item.mode_id),
+                dialyszers:item.dialysis_dialyszers +'  '+ item.dialysis_irrigation+'  '+item.dialysis_strainer
+                // dialyszers:item.dialysis_dialyszers || item.dialysis_irrigation || item.dialysis_strainer
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('77777',response);
+        })
+      },
+       // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+      getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      // 透析模式
+      getmode(ids){
+        const modes=this.modearr
+        for(let i in modes){
+          if(ids == modes[i].id){
+            return modes[i].name
+          }
+        }
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 全部透析器
+      Getdialyzerconfig(){
+        Getdialyzerconfig().then(response =>{
+          console.log('666666',response);
+        })
+      },
+      getdialyze(val){
+        const option = this.dialyze_options
+        for(let i in option){
+          if(val == option[i].id){
+            return option[i].name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.Getdialyzerconfig()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/dialyze_after.vue

@@ -0,0 +1,681 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者透后体重分析</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div style="margin: 0 10px;">
+            <el-date-picker
+              v-model="start_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              v-model="end_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+          </div>
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <div ref="mychart">
+          <div class="echart" id="mychart"  style="width:100%;height:60vh"></div>
+        </div>
+
+        <div style="position: fixed;right: 5%;top: 50vh;">
+          <el-popover
+            placement="left"
+            title="提示"
+            width="500"
+            trigger="click"
+            content="1.统计时间段内所有患者每次透析后，透后体重是否在干体重的±0.3范围内。">
+            <img src="@/assets/img/xiang.png" alt="" style="height: 20px;width: 20px;" slot="reference">
+            <!-- <el-button slot="reference">click 激活</el-button> -->
+          </el-popover>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="详情"
+        :visible.sync="dialyze_dialog"
+        width="80%">
+        <div>
+          <div style="display: flex;margin-bottom: 20px;">
+            <div style="flex: 2;display: flex;flex-wrap:wrap">
+              <div>
+                日期：
+                <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                  <el-option
+                    v-for="item in date_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div style="margin:0 10px;">
+                <el-date-picker
+                  v-model="start_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="end_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+              </div>
+              <div>
+                体重增长:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                干体重:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                透后体重:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div >
+                <el-input v-model="input" placeholder="搜索患者姓名"></el-input>
+              </div>
+            </div>
+            <div style="flex: 1;">
+              <div>
+                <el-button type="primary" @click="deil_click">查询</el-button>
+                <el-button type="primary" @click="exportExcel">导出</el-button>
+              </div>
+            </div>
+          </div>
+
+          <el-table :data="tableData" border style="width: 100%"
+          :header-cell-style="{textAlign: 'center'}"
+          :cell-style="{ textAlign: 'center' }"
+          height="380">
+            <el-table-column
+              prop="index"
+              label="序号"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialysis_no"
+              label="透析号"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="患者姓名">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="性别"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="年龄"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="透析日期"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="干体重"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialyszers"
+              label="前次透后体重">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="透前体重"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="体重增加"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialyszers"
+              label="透后体重">
+            </el-table-column>
+          </el-table>
+          <div style="text-align: right;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50,100, 200, 300, 400]"
+              :page-size="limit"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialyze_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="dialyze_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialyzer,Getdialyzerdetail,Getdialyzerconfig} from '../../../../api/qcd'
+import { forEach } from 'jszip';
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        dialyze_value:0,
+        dialyze_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        dialyze_options:[],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        modearr:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+          { id:30, name:"血浆胆红素吸附+HP"},{ id:31, name:"HPD"},{ id:32, name:"HDP"},{ id:33, name:"HFD"},{ id:34, name:"HDF100"},
+          { id:35, name:"HDF600"},{ id:36, name:"HDF800"},{ id:37, name:"HDF1000"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+
+
+        input:'',
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+        }
+        Getdialyzer(params).then(response =>{
+          console.log('ressponse',response.data.data);
+          if(response.data.state ==1){
+            console.log('bbbbbbbbb',response.data.data);
+            const list = response.data.data.data
+            const xAxis =[]
+            const yAxis = []
+            list.forEach(item =>{
+
+              xAxis.push(item.name)
+              yAxis.push(item.count)
+            })
+            this.bar_xAxis = xAxis
+            const options = []
+            for(let i in xAxis){
+              const arr ={
+                id:i+1,
+                name:xAxis[i]
+              }
+              options.push(arr)
+            }
+            this.dialyze_options = options
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: xAxis,
+                axisLabel:{
+                  interval:0,
+                }
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  data:yAxis ,
+                  type: 'bar',
+                  barWidth: '25%',
+                  label: {
+                    normal: {
+                      show: true,
+                      position: 'top',
+                      formatter: '{c}',
+                      textStyle:{
+                        color: 'black',//字体颜色
+                        fontSize: 13//字体大小
+                      }
+                    },
+                  },
+                  itemStyle:{
+                    normal:{
+                      color:function (params){
+                        // const colorarr=['#FFA333','#A155E8','#6D91FF','#A233A2'];
+                        var colorarr = [["#A9E0F3", "#9FBDFC"],["#FFD7C0", "#FF9994"]]
+                        var index = params.dataIndex;
+                        if (params.dataIndex >= colorarr.length) {
+                          index = params.dataIndex % colorarr.length;
+                        }
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          { offset: 0, color: colorarr[index][0] },
+                          // { offset: 0.5, color: colorList[index][1] },
+                          { offset: 1, color: colorarr[index][1] }
+                        ]);
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.dialyze_dialog = true
+              console.log('vvvvv',params);
+              this.Getdialyzerdetail(params.name)
+            })
+          }
+
+        })
+
+      },
+      // 导出excel
+      exportExcel(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '透析日期','透析模式', '透析器']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.name,
+            item.date,
+            item.mode_name,
+            item.dialyszers,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析器使用统计') // 工作簿名称
+        let name = '透析器使用统计'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      deil_click(){
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          // console.log('5555',imageUrl);
+        //   // const base = this.url.split(',')[1]
+        //   // console.log('2222',base);
+          const blob = this.dataURLtoBlob(imageUrl)
+          // console.log('4444',blob);
+          const url = URL.createObjectURL(blob);
+          // const file = (this.url).blob();
+          // console.log('1111',url);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析器使用统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 详情数据源
+      Getdialyzerdetail(name){
+        const params={
+          dialyzer:name,
+          start_date:this.start_date,
+          end_date:this.end_date,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialyzerdetail(params).then(response =>{
+          if(response.data.state == 1){
+            const list = response.data.data.prescriptions
+            const table=[]
+            list.forEach((item,index)=>{
+              const obj ={
+                index:index+1,
+                dialysis_no:item.patient.dialysis_no,
+                name:item.patient.name,
+                date:this.getTime(item.record_date),
+                mode_name:this.getmode(item.mode_id),
+                dialyszers:item.dialysis_dialyszers +'  '+ item.dialysis_irrigation+'  '+item.dialysis_strainer
+                // dialyszers:item.dialysis_dialyszers || item.dialysis_irrigation || item.dialysis_strainer
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('77777',response);
+        })
+      },
+       // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+      getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      // 透析模式
+      getmode(ids){
+        const modes=this.modearr
+        for(let i in modes){
+          if(ids == modes[i].id){
+            return modes[i].name
+          }
+        }
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 全部透析器
+      Getdialyzerconfig(){
+        Getdialyzerconfig().then(response =>{
+          console.log('666666',response);
+        })
+      },
+      getdialyze(val){
+        const option = this.dialyze_options
+        for(let i in option){
+          if(val == option[i].id){
+            return option[i].name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.Getdialyzerconfig()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/dry_denominator.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者体重增长分析(以干体重为分母)</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div style="margin: 0 10px;">
+            <el-date-picker
+              v-model="start_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              v-model="end_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+          </div>
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <div ref="mychart">
+          <div class="echart" id="mychart"  style="width:100%;height:60vh"></div>
+        </div>
+
+        <div style="position: fixed;right: 5%;top: 50vh;">
+          <el-popover
+            placement="left"
+            title="提示"
+            width="500"
+            trigger="click"
+            content="1.统计时间段内所有患者每次透析时的体重增长情况。
+                      2.体重增长=（透前体重-干体重）/干体重×100%。">
+            <img src="@/assets/img/xiang.png" alt="" style="height: 20px;width: 20px;" slot="reference">
+            <!-- <el-button slot="reference">click 激活</el-button> -->
+          </el-popover>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="详情"
+        :visible.sync="dialyze_dialog"
+        width="80%">
+        <div>
+          <div style="display: flex;margin-bottom: 20px;">
+            <div style="flex: 2;display: flex;flex-wrap:wrap">
+              <div>
+                日期：
+                <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                  <el-option
+                    v-for="item in date_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div style="margin:0 10px;">
+                <el-date-picker
+                  v-model="start_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="end_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+              </div>
+              <div>
+                体重增长:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                干体重:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                透后体重:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div >
+                <el-input v-model="input" placeholder="搜索患者姓名"></el-input>
+              </div>
+            </div>
+            <div style="flex: 1;">
+              <div>
+                <el-button type="primary" @click="deil_click">查询</el-button>
+                <el-button type="primary" @click="exportExcel">导出</el-button>
+              </div>
+            </div>
+          </div>
+
+          <el-table :data="tableData" border style="width: 100%"
+          :header-cell-style="{textAlign: 'center'}"
+          :cell-style="{ textAlign: 'center' }"
+          height="380">
+            <el-table-column
+              prop="index"
+              label="序号"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialysis_no"
+              label="透析号"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="患者姓名">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="性别"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="年龄"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="透析日期"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="干体重"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialyszers"
+              label="前次透后体重">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="透前体重"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="体重增加"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialyszers"
+              label="透后体重">
+            </el-table-column>
+          </el-table>
+          <div style="text-align: right;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50,100, 200, 300, 400]"
+              :page-size="limit"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialyze_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="dialyze_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialyzer,Getdialyzerdetail,Getdialyzerconfig} from '../../../../api/qcd'
+import { forEach } from 'jszip';
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        dialyze_value:0,
+        dialyze_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        dialyze_options:[],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        modearr:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+          { id:30, name:"血浆胆红素吸附+HP"},{ id:31, name:"HPD"},{ id:32, name:"HDP"},{ id:33, name:"HFD"},{ id:34, name:"HDF100"},
+          { id:35, name:"HDF600"},{ id:36, name:"HDF800"},{ id:37, name:"HDF1000"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+
+
+        input:'',
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+        }
+        Getdialyzer(params).then(response =>{
+          console.log('ressponse',response.data.data);
+          if(response.data.state ==1){
+            console.log('bbbbbbbbb',response.data.data);
+            const list = response.data.data.data
+            const xAxis =[]
+            const yAxis = []
+            list.forEach(item =>{
+
+              xAxis.push(item.name)
+              yAxis.push(item.count)
+            })
+            this.bar_xAxis = xAxis
+            const options = []
+            for(let i in xAxis){
+              const arr ={
+                id:i+1,
+                name:xAxis[i]
+              }
+              options.push(arr)
+            }
+            this.dialyze_options = options
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: xAxis,
+                axisLabel:{
+                  interval:0,
+                }
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  data:yAxis ,
+                  type: 'bar',
+                  barWidth: '25%',
+                  label: {
+                    normal: {
+                      show: true,
+                      position: 'top',
+                      formatter: '{c}',
+                      textStyle:{
+                        color: 'black',//字体颜色
+                        fontSize: 13//字体大小
+                      }
+                    },
+                  },
+                  itemStyle:{
+                    normal:{
+                      color:function (params){
+                        // const colorarr=['#FFA333','#A155E8','#6D91FF','#A233A2'];
+                        var colorarr = [["#A9E0F3", "#9FBDFC"],["#FFD7C0", "#FF9994"]]
+                        var index = params.dataIndex;
+                        if (params.dataIndex >= colorarr.length) {
+                          index = params.dataIndex % colorarr.length;
+                        }
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          { offset: 0, color: colorarr[index][0] },
+                          // { offset: 0.5, color: colorList[index][1] },
+                          { offset: 1, color: colorarr[index][1] }
+                        ]);
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.dialyze_dialog = true
+              console.log('vvvvv',params);
+              this.Getdialyzerdetail(params.name)
+            })
+          }
+
+        })
+
+      },
+      // 导出excel
+      exportExcel(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '透析日期','透析模式', '透析器']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.name,
+            item.date,
+            item.mode_name,
+            item.dialyszers,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析器使用统计') // 工作簿名称
+        let name = '透析器使用统计'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      deil_click(){
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          // console.log('5555',imageUrl);
+        //   // const base = this.url.split(',')[1]
+        //   // console.log('2222',base);
+          const blob = this.dataURLtoBlob(imageUrl)
+          // console.log('4444',blob);
+          const url = URL.createObjectURL(blob);
+          // const file = (this.url).blob();
+          // console.log('1111',url);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析器使用统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 详情数据源
+      Getdialyzerdetail(name){
+        const params={
+          dialyzer:name,
+          start_date:this.start_date,
+          end_date:this.end_date,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialyzerdetail(params).then(response =>{
+          if(response.data.state == 1){
+            const list = response.data.data.prescriptions
+            const table=[]
+            list.forEach((item,index)=>{
+              const obj ={
+                index:index+1,
+                dialysis_no:item.patient.dialysis_no,
+                name:item.patient.name,
+                date:this.getTime(item.record_date),
+                mode_name:this.getmode(item.mode_id),
+                dialyszers:item.dialysis_dialyszers +'  '+ item.dialysis_irrigation+'  '+item.dialysis_strainer
+                // dialyszers:item.dialysis_dialyszers || item.dialysis_irrigation || item.dialysis_strainer
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('77777',response);
+        })
+      },
+       // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+      getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      // 透析模式
+      getmode(ids){
+        const modes=this.modearr
+        for(let i in modes){
+          if(ids == modes[i].id){
+            return modes[i].name
+          }
+        }
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 全部透析器
+      Getdialyzerconfig(){
+        Getdialyzerconfig().then(response =>{
+          console.log('666666',response);
+        })
+      },
+      getdialyze(val){
+        const option = this.dialyze_options
+        for(let i in option){
+          if(val == option[i].id){
+            return option[i].name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.Getdialyzerconfig()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/dry_weight.vue

@@ -0,0 +1,711 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者干体重分析</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div style="margin:0 10px">
+            <el-date-picker
+              v-model="start_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              v-model="end_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+          </div>
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <div ref="mychart">
+          <div class="echart" id="mychart"  style="width:100%;height:60vh"></div>
+        </div>
+
+          <div style="position: fixed;right: 5%;top: 50vh;">
+            <el-popover
+              placement="left"
+              title="提示"
+              width="500"
+              trigger="click"
+              content="1.统计时间段内留治患者干体重，在当前时间段的区间分布，不是统计每次透析的干体重。
+                       2.如果一个患者在时间段内，调整过两次干体重，以最后一次为准。">
+              <img src="@/assets/img/xiang.png" alt="" style="height: 20px;width: 20px;" slot="reference">
+              <!-- <el-button slot="reference">click 激活</el-button> -->
+            </el-popover>
+          </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="提示"
+        :visible.sync="complete_dialog"
+        width="80%">
+        <div>
+          <div style="display: flex;margin-bottom: 20px;">
+            <div style="flex: 2;display: flex;">
+              <div>
+                日期：
+                <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                  <el-option
+                    v-for="item in date_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div style="margin:0 10px">
+                <el-date-picker
+                  v-model="start_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="end_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+              </div>
+
+              <div>
+                状态:
+                <el-select v-model="status_value" placeholder="请选择" style="width: 130px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in status_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div style="flex: 1;">
+              <div>
+                <el-button type="primary" @click="detil_click">查询</el-button>
+
+                <el-button type="primary" @click="derive_click">导出</el-button>
+              </div>
+            </div>
+          </div>
+          <div>
+            <el-table :data="tableData"
+              border
+              style="width: 100%;"
+              :header-cell-style = "{'text-align':'center'}"
+              :cell-style="{'text-align':'center'}"
+              height="380">
+              <el-table-column
+                prop="index"
+                label="序号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_no"
+                label="透析号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="patient_name"
+                label="患者姓名">
+              </el-table-column>
+              <el-table-column
+                prop="age"
+                label="年龄">
+              </el-table-column>
+              <el-table-column
+                prop="dialysis_date"
+                label="干体重"
+                width="">
+              </el-table-column>
+             
+            </el-table>
+          </div>
+          <div style="text-align:right;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50,100, 200, 300, 400]"
+              :page-size="limit"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="complete_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="complete_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialysistreatfinish,Getdialysistreatdetail} from '../../../../api/qcd'
+import {getAllNurseList} from '@/api/fallassement'
+import { getAllDoctorList} from "@/api/device"
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        status_value:0,
+        complete_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        // status_options:[],
+        nurseList:[],
+        operators:[],
+        docList:[],
+        status_options:[{value:1,label:'达到透析处方时间'},{value:2,label:'超出处方时间'},{value:3,label:'未到达处方时间'}],
+        // status_options:[{value:1,label:'待定卧床'},{value:2,label:'<40KG'},{value:3,label:'40-50KG'},
+        //                 {value:4,label:'50-60KG'},{value:5,label:'<60-70KG'},{value:6,label:'>70KG'}
+        //                 ],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        mode_options:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id: 15, name: 'HD前置换' },{ id: 16, name: 'HD后置换' },{ id: 17, name: 'HDF前置换' },{ id: 18, name: 'HDF后置换' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+        status_id:"",
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params={
+          start_date:this.start_date,
+          end_date:this.end_date
+        }
+        Getdialysistreatfinish(params).then(response =>{
+          if(response.data.state ==1){
+            const list = response.data.data.data
+            const xAxis = []
+            const yAxis = []
+
+            const total = response.data.data.total
+            for(let key in list){
+              const obj={
+                name:key,
+                value:list[key]
+              }
+              xAxis.push(obj)
+              yAxis.push(key)
+            }
+            const status = []
+            // for(let i in yAxis){
+            //   const obj ={
+            //     value:(i*1)+1,
+            //     label:yAxis[i]
+            //   }
+            //   status.push(obj)
+            // }
+            // this.status_options = status
+            console.log('this.status_options',this.status_options);
+            const option = {
+                title:{
+                  text:'总数'+total,
+                  left:'5%',
+                  bottom:'5%',
+                  textStyle:{
+                    fontSize:30
+                  }
+                },
+                tooltip: {
+                  trigger: 'item',
+
+                },
+                legend: {
+                  data:yAxis,
+                  left: '10%',
+                  top: '30%',
+                  orient: 'vertical'
+                },
+                color:['#FFD7C0','#9FBDFC',"#A9E0F3", "#FF9994",'aquamarine','gold'],
+                series: [
+                  {
+                    name: '',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: true,
+                    itemStyle: {
+                      borderRadius: 10,
+                      borderColor: '#fff',
+                      borderWidth: 2
+                    },
+                    label: {
+                      show: true,
+                      position: 'center',
+                      normal : {
+                        formatter: '{b}:{c}: ({d}%)',
+                        textStyle : {
+                          fontWeight : 'normal',
+                          fontSize : 15,
+                          color : "black"
+                        }
+                      }
+                    },
+                    emphasis: {
+                      label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                      }
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    data: xAxis
+                  }
+                ]
+              };
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.complete_dialog = true
+              console.log('bbbb',params);
+              var status_id =''
+              for(let i in this.status_options){
+                if(params.data.name == this.status_options[i].label){
+                  status_id = this.status_options[i].value
+                }
+              }
+              this.getdetail(status_id)
+            })
+          }
+        })
+
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      detil_click(){
+        this.getdetail(this.status_value)
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          const blob = this.dataURLtoBlob(imageUrl)
+          const url = URL.createObjectURL(blob);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析完成率统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 导出excel
+      derive_click(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '年龄','透析日期', '处方透析时长', '实际透析时长', '实际差(min)', '主治医生', '主治护士']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.patient_name,
+            item.age,
+            item.dialysis_date,
+            item.dialysis_duration,
+            item.actual_duration,
+            item.diff,
+            item.doctor,
+            item.nurse,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析治疗完成率') // 工作簿名称
+        let name = '透析治疗完成率'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 详情数据源
+      getdetail(mode){
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+          mode:mode,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialysistreatdetail(params).then(response =>{
+          if(response.data.state){
+            const list = response.data.data.list
+            const xAxis = []
+            const table = []
+            list.forEach((item,index) =>{
+              const obj={
+                index:index+1,
+                dialysis_no:item.dialysis_no,
+                patient_name:item.patient_name,
+                age:this.analyzeIDCard(item.id_card_no),
+                dialysis_date:item.dialysis_date.split('T')[0],
+                dialysis_duration:item.dialysis_duration,
+                actual_duration:item.actual_duration,
+                diff:item.diff,
+                doctor:this.getdoctor(item.doctor),
+                nurse:this.getnurse(item.nurse)
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('55555',response);
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+       getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.getdetail(this.status_value)
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.getdetail(this.status_value)
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 计算年龄
+      analyzeIDCard(IDCard){
+        var age = 0,yearBirth,monthBirth,dayBirth;
+        //获取用户身份证号码
+        var userCard = IDCard;
+        //如果身份证号码为undefind则返回空
+        if(!userCard){
+          return age;
+        }
+        var reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/; //验证身份证号码的正则
+        if (reg.test(userCard)) {
+          if (userCard.length == 15) {
+              var org_birthday = userCard.substring(6, 12);
+              //获取出生年月日
+              yearBirth = "19" + org_birthday.substring(0, 2);
+              monthBirth = org_birthday.substring(2, 4);
+              dayBirth = org_birthday.substring(4, 6);
+              } else if (userCard.length == 18) {
+              //获取出生年月日
+              yearBirth = userCard.substring(6,10);
+              monthBirth = userCard.substring(10,12);
+              dayBirth = userCard.substring(12,14);
+
+            }
+            //获取当前年月日并计算年龄
+            var myDate = new Date();
+            var monthNow = myDate.getMonth() + 1;
+            var dayNow = myDate.getDate();
+            var age = myDate.getFullYear() - yearBirth;
+            if(monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)){
+              age--;
+            }
+            //返回年龄
+            return age;
+        } else {
+          return ''
+        }
+
+      },
+      // 护士
+      getAllNurseList(){
+        getAllNurseList().then(response=>{
+           if(response.data.state ==1){
+             var nurseList  = response.data.data.nurseList
+            console.log('0000',nurseList);
+             this.nurseList =nurseList
+           }
+        })
+      },
+      // 医生
+      getAllDoctorList(){
+        getAllDoctorList().then(response=>{
+          if(response.data.state == 1){
+              var list = response.data.data.list
+              console.log("list222222",list)
+              this.docList = list
+              this.operators = response.data.data.operators
+          }
+        })
+      },
+      getnurse(ids){
+        const nurse = this.nurseList
+        for(let i in nurse){
+          if(ids==nurse[i].admin_user_id){
+            return nurse[i].user_name
+          }
+        }
+      },
+      getdoctor(ids){
+        const doctor = this.docList
+        for(let i in doctor){
+          if(ids == doctor[i].admin_user_id){
+            return doctor[i].user_name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.getAllNurseList()
+      this.getAllDoctorList()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/list_denominator.vue

@@ -0,0 +1,682 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者体重增长分析(以上次透后体重为分母)</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+          <div style="margin: 0 10px;">
+            <el-date-picker
+              v-model="start_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              v-model="end_date"
+              type="date"
+              value-format="yyyy-MM-dd"
+              placeholder="选择日期"
+              style="width: 150px;">
+            </el-date-picker>
+          </div>
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 图表 -->
+        <div ref="mychart">
+          <div class="echart" id="mychart"  style="width:100%;height:60vh"></div>
+        </div>
+
+        <div style="position: fixed;right: 5%;top: 50vh;">
+          <el-popover
+            placement="left"
+            title="提示"
+            width="500"
+            trigger="click"
+            content="1.统计时间段内所有患者每次透析时的体重增长情况。
+                     2.体重增长=（透前体重-上次透后体重）/上次透后体重×100%。">
+            <img src="@/assets/img/xiang.png" alt="" style="height: 20px;width: 20px;" slot="reference">
+            <!-- <el-button slot="reference">click 激活</el-button> -->
+          </el-popover>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="详情"
+        :visible.sync="dialyze_dialog"
+        width="80%">
+        <div>
+          <div style="display: flex;margin-bottom: 20px;">
+            <div style="flex: 2;display: flex;flex-wrap:wrap">
+              <div>
+                日期：
+                <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                  <el-option
+                    v-for="item in date_options"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+              </div>
+              <div style="margin:0 10px;">
+                <el-date-picker
+                  v-model="start_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+                <span>-</span>
+                <el-date-picker
+                  v-model="end_date"
+                  type="date"
+                  value-format="yyyy-MM-dd"
+                  placeholder="选择日期"
+                  style="width: 150px;">
+                </el-date-picker>
+              </div>
+              <div>
+                体重增长:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                干体重:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div>
+                透后体重:
+                <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                  <el-option :key="0" label="不限" :value="0"></el-option>
+                  <el-option
+                    v-for="item in dialyze_options"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </div>
+              <div >
+                <el-input v-model="input" placeholder="搜索患者姓名"></el-input>
+              </div>
+            </div>
+            <div style="flex: 1;">
+              <div>
+                <el-button type="primary" @click="deil_click">查询</el-button>
+                <el-button type="primary" @click="exportExcel">导出</el-button>
+              </div>
+            </div>
+          </div>
+
+          <el-table :data="tableData" border style="width: 100%"
+          :header-cell-style="{textAlign: 'center'}"
+          :cell-style="{ textAlign: 'center' }"
+          height="380">
+            <el-table-column
+              prop="index"
+              label="序号"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialysis_no"
+              label="透析号"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="患者姓名">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="性别"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="年龄"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="透析日期"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="干体重"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialyszers"
+              label="前次透后体重">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="透前体重"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="体重增加"
+              width="">
+            </el-table-column>
+            <el-table-column
+              prop="dialyszers"
+              label="透后体重">
+            </el-table-column>
+          </el-table>
+          <div style="text-align: right;margin-top: 10px;">
+            <el-pagination
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :current-page="currentPage"
+              :page-sizes="[50,100, 200, 300, 400]"
+              :page-size="limit"
+              layout="total, sizes, prev, pager, next, jumper"
+              :total="total">
+            </el-pagination>
+          </div>
+
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialyze_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="dialyze_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialyzer,Getdialyzerdetail,Getdialyzerconfig} from '../../../../api/qcd'
+import { forEach } from 'jszip';
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        dialyze_value:0,
+        dialyze_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        dialyze_options:[],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        modearr:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+          { id:30, name:"血浆胆红素吸附+HP"},{ id:31, name:"HPD"},{ id:32, name:"HDP"},{ id:33, name:"HFD"},{ id:34, name:"HDF100"},
+          { id:35, name:"HDF600"},{ id:36, name:"HDF800"},{ id:37, name:"HDF1000"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+
+
+        input:'',
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+        }
+        Getdialyzer(params).then(response =>{
+          console.log('ressponse',response.data.data);
+          if(response.data.state ==1){
+            console.log('bbbbbbbbb',response.data.data);
+            const list = response.data.data.data
+            const xAxis =[]
+            const yAxis = []
+            list.forEach(item =>{
+
+              xAxis.push(item.name)
+              yAxis.push(item.count)
+            })
+            this.bar_xAxis = xAxis
+            const options = []
+            for(let i in xAxis){
+              const arr ={
+                id:i+1,
+                name:xAxis[i]
+              }
+              options.push(arr)
+            }
+            this.dialyze_options = options
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: xAxis,
+                axisLabel:{
+                  interval:0,
+                }
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  data:yAxis ,
+                  type: 'bar',
+                  barWidth: '25%',
+                  label: {
+                    normal: {
+                      show: true,
+                      position: 'top',
+                      formatter: '{c}',
+                      textStyle:{
+                        color: 'black',//字体颜色
+                        fontSize: 13//字体大小
+                      }
+                    },
+                  },
+                  itemStyle:{
+                    normal:{
+                      color:function (params){
+                        // const colorarr=['#FFA333','#A155E8','#6D91FF','#A233A2'];
+                        var colorarr = [["#A9E0F3", "#9FBDFC"],["#FFD7C0", "#FF9994"]]
+                        var index = params.dataIndex;
+                        if (params.dataIndex >= colorarr.length) {
+                          index = params.dataIndex % colorarr.length;
+                        }
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          { offset: 0, color: colorarr[index][0] },
+                          // { offset: 0.5, color: colorList[index][1] },
+                          { offset: 1, color: colorarr[index][1] }
+                        ]);
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.dialyze_dialog = true
+              console.log('vvvvv',params);
+              this.Getdialyzerdetail(params.name)
+            })
+          }
+
+        })
+
+      },
+      // 导出excel
+      exportExcel(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '透析日期','透析模式', '透析器']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.name,
+            item.date,
+            item.mode_name,
+            item.dialyszers,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析器使用统计') // 工作簿名称
+        let name = '透析器使用统计'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      deil_click(){
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          // console.log('5555',imageUrl);
+        //   // const base = this.url.split(',')[1]
+        //   // console.log('2222',base);
+          const blob = this.dataURLtoBlob(imageUrl)
+          // console.log('4444',blob);
+          const url = URL.createObjectURL(blob);
+          // const file = (this.url).blob();
+          // console.log('1111',url);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析器使用统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 详情数据源
+      Getdialyzerdetail(name){
+        const params={
+          dialyzer:name,
+          start_date:this.start_date,
+          end_date:this.end_date,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialyzerdetail(params).then(response =>{
+          if(response.data.state == 1){
+            const list = response.data.data.prescriptions
+            const table=[]
+            list.forEach((item,index)=>{
+              const obj ={
+                index:index+1,
+                dialysis_no:item.patient.dialysis_no,
+                name:item.patient.name,
+                date:this.getTime(item.record_date),
+                mode_name:this.getmode(item.mode_id),
+                dialyszers:item.dialysis_dialyszers +'  '+ item.dialysis_irrigation+'  '+item.dialysis_strainer
+                // dialyszers:item.dialysis_dialyszers || item.dialysis_irrigation || item.dialysis_strainer
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('77777',response);
+        })
+      },
+       // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+      getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      // 透析模式
+      getmode(ids){
+        const modes=this.modearr
+        for(let i in modes){
+          if(ids == modes[i].id){
+            return modes[i].name
+          }
+        }
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 全部透析器
+      Getdialyzerconfig(){
+        Getdialyzerconfig().then(response =>{
+          console.log('666666',response);
+        })
+      },
+      getdialyze(val){
+        const option = this.dialyze_options
+        for(let i in option){
+          if(val == option[i].id){
+            return option[i].name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.Getdialyzerconfig()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/components/weight_table.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <div>
+        <span>
+          <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
+        </span>&nbsp;&nbsp;
+        <span>患者体重详情</span>
+      </div>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div style="display: flex;margin-bottom: 20px;">
+          <div style="flex: 2;display: flex;flex-wrap:wrap">
+            <div>
+              日期：
+              <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
+                <el-option
+                  v-for="item in date_options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <div style="margin:0 10px;">
+              <el-date-picker
+                v-model="start_date"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+                style="width: 150px;">
+              </el-date-picker>
+              <span>-</span>
+              <el-date-picker
+                v-model="end_date"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="选择日期"
+                style="width: 150px;">
+              </el-date-picker>
+            </div>
+            <div>
+              体重增长:
+              <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                <el-option :key="0" label="不限" :value="0"></el-option>
+                <el-option
+                  v-for="item in dialyze_options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+            <div>
+              干体重:
+              <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                <el-option :key="0" label="不限" :value="0"></el-option>
+                <el-option
+                  v-for="item in dialyze_options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+            <div>
+              透后体重:
+              <el-select v-model="dialyze_value" placeholder="请选择" style="width: 100px;">
+                <el-option :key="0" label="不限" :value="0"></el-option>
+                <el-option
+                  v-for="item in dialyze_options"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </div>
+            <div >
+              <el-input v-model="input" placeholder="搜索患者姓名"></el-input>
+            </div>
+          </div>
+          <div style="flex: 1;">
+            <div>
+              <el-button type="primary" @click="deil_click">查询</el-button>
+              <el-button type="primary" @click="exportExcel">导出</el-button>
+            </div>
+          </div>
+        </div>
+
+        <el-table :data="tableData" border style="width: 100%"
+        :header-cell-style="{textAlign: 'center'}"
+        :cell-style="{ textAlign: 'center' }"
+        height="380">
+          <el-table-column
+            prop="index"
+            label="序号"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="dialysis_no"
+            label="透析号"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="患者姓名">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="性别"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="年龄"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="透析日期"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="mode_name"
+            label="干体重"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="dialyszers"
+            label="前次透后体重">
+          </el-table-column>
+          <el-table-column
+            prop="date"
+            label="透前体重"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="mode_name"
+            label="体重增加"
+            width="">
+          </el-table-column>
+          <el-table-column
+            prop="dialyszers"
+            label="透后体重">
+          </el-table-column>
+        </el-table>
+        <div style="text-align: right;margin-top: 10px;">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[50,100, 200, 300, 400]"
+            :page-size="limit"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+   
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import { uParseTime } from "@/utils/tools";
+import {Getdialyzer,Getdialyzerdetail,Getdialyzerconfig} from '../../../../api/qcd'
+import { forEach } from 'jszip';
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        dialyze_value:0,
+        dialyze_dialog:false,
+        currentPage:1,
+        limit:50,
+        total:0,
+        tableData:[],
+        dialyze_options:[],
+        date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
+                      {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
+        ],
+        modearr:[{ id: 1, name: 'HD' },{ id: 2, name: 'HDF' },{ id: 3, name: 'HD + HP' },{ id: 4, name: 'HP' },
+          { id: 5, name: 'HF' },{ id: 6, name: 'SCUF' },{ id: 7, name: 'IUF' },{ id: 8, name: 'HFHD' },{ id: 9, name: 'HFHD+HP' },
+          { id: 10, name: 'PHF' },{ id: 11, name: 'HFR' },{ id: 12, name: 'HDF+HP' },{ id: 13, name: 'CRRT' },{ id: 14, name: '腹水回输' },
+          { id:19, name:"IUF+HD"},{ id:20, name:"UF"},{ id:21, name:"HD+"},{ id:22, name:"血浆胆红素吸附+HDF"},{ id:23, name:"血浆胆红素吸附"},
+          { id:24, name:"I-HDF"},{ id:25, name:"HD高通"},{ id:26, name:"CVVH"},{ id:27, name:"CVVHD"},{ id:28, name:"CVVHDF"},{ id:29, name:"PE"},
+          { id:30, name:"血浆胆红素吸附+HP"},{ id:31, name:"HPD"},{ id:32, name:"HDP"},{ id:33, name:"HFD"},{ id:34, name:"HDF100"},
+          { id:35, name:"HDF600"},{ id:36, name:"HDF800"},{ id:37, name:"HDF1000"},
+        ],
+        date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
+        source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
+
+
+        input:'',
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params ={
+          start_date:this.start_date,
+          end_date:this.end_date,
+        }
+        Getdialyzer(params).then(response =>{
+          console.log('ressponse',response.data.data);
+          if(response.data.state ==1){
+            console.log('bbbbbbbbb',response.data.data);
+            const list = response.data.data.data
+            const xAxis =[]
+            const yAxis = []
+            list.forEach(item =>{
+
+              xAxis.push(item.name)
+              yAxis.push(item.count)
+            })
+            this.bar_xAxis = xAxis
+            const options = []
+            for(let i in xAxis){
+              const arr ={
+                id:i+1,
+                name:xAxis[i]
+              }
+              options.push(arr)
+            }
+            this.dialyze_options = options
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: xAxis,
+                axisLabel:{
+                  interval:0,
+                }
+              },
+              yAxis: {
+                type: 'value'
+              },
+              series: [
+                {
+                  data:yAxis ,
+                  type: 'bar',
+                  barWidth: '25%',
+                  label: {
+                    normal: {
+                      show: true,
+                      position: 'top',
+                      formatter: '{c}',
+                      textStyle:{
+                        color: 'black',//字体颜色
+                        fontSize: 13//字体大小
+                      }
+                    },
+                  },
+                  itemStyle:{
+                    normal:{
+                      color:function (params){
+                        // const colorarr=['#FFA333','#A155E8','#6D91FF','#A233A2'];
+                        var colorarr = [["#A9E0F3", "#9FBDFC"],["#FFD7C0", "#FF9994"]]
+                        var index = params.dataIndex;
+                        if (params.dataIndex >= colorarr.length) {
+                          index = params.dataIndex % colorarr.length;
+                        }
+                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                          { offset: 0, color: colorarr[index][0] },
+                          // { offset: 0.5, color: colorList[index][1] },
+                          { offset: 1, color: colorarr[index][1] }
+                        ]);
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+            myChart.setOption(option);
+            myChart.on('click',params =>{
+              this.dialyze_dialog = true
+              console.log('vvvvv',params);
+              this.Getdialyzerdetail(params.name)
+            })
+          }
+
+        })
+
+      },
+      // 导出excel
+      exportExcel(){
+        let tableData = [
+          ['序号', '透析号', '患者姓名', '透析日期','透析模式', '透析器']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            item.index,
+            item.dialysis_no,
+            item.name,
+            item.date,
+            item.mode_name,
+            item.dialyszers,
+          ]
+          tableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(tableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析器使用统计') // 工作簿名称
+        let name = '透析器使用统计'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      deil_click(){
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+       // 下载
+      Download_click(){
+        const options ={
+          allowTaint: true,
+          useCORS: true
+        }
+        html2canvas(this.$refs.mychart,options).then(canvas =>{
+          // const imageSrc = canvas.toDataURL();
+          const imageUrl = canvas.toDataURL("image/png");
+          // console.log('5555',imageUrl);
+        //   // const base = this.url.split(',')[1]
+        //   // console.log('2222',base);
+          const blob = this.dataURLtoBlob(imageUrl)
+          // console.log('4444',blob);
+          const url = URL.createObjectURL(blob);
+          // const file = (this.url).blob();
+          // console.log('1111',url);
+          var link= document.createElement("a");
+        //   //将生成的图片url赋值给a标签的href属性
+          link.href = url;
+        //   //设置下载的文件名
+          link.download = "透析器使用统计.jpg";
+          // // 将a标签插入dom中
+          console.log('link',link);
+          document.body.appendChild(link);
+          //模拟点击事件触发下载
+          link.click();
+          // 完成之后销毁创建的a标签
+          document.body.removeChild(link);
+
+        })
+      },
+      // 选择日期
+      datachange(eve){
+        if(eve ==1){
+          this.start_date = this.getPreviousDate(7)
+          this.end_date = this.getTime(new Date())
+        }else if(eve==2){
+          this.start_date = this.getFirstDayOfWeek(new Date())
+          this.end_date = this.getTime(new Date())
+          console.log('this.start_date', this.start_date);
+        }else if(eve ==3){
+          var date=new Date()
+          date.setDate(date.getDate()-7 - date.getDay() + 1);
+          var m =''
+          var d = ''
+          if(date.getMonth() + 1<10){
+            m = '0'+(date.getMonth() + 1)
+          }else{
+             m = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+             d = '0'+date.getDate()
+          }else{
+            d = date.getDate()
+          }
+          // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
+          this.start_date = date.getFullYear() + "-" + m + "-" + d ;
+          date.setDate(date.getDate() +6);
+          var mm = ''
+          var dd = ''
+          if(date.getMonth() + 1<10){
+            mm = '0'+(date.getMonth() + 1)
+          }else{
+            mm = date.getMonth() + 1
+          }
+          if(date.getDate()<10){
+            dd = '0'+date.getDate()
+          }else{
+            dd = date.getDate()
+          }
+          // if(date.getMonth() + 1<10)
+          // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
+          this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
+          console.log('this.end_date',this.end_date);
+
+        }else if(eve ==4){
+          this.start_date = this.getFirstDayOfMonth(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve ==5){
+          this.getLastMonthFirstDay()
+          this.getLastMonthLastDay()
+        }else if(eve == 6){
+          this.start_date = this.getFirstDayOfYear(new Date())
+          this.end_date = this.getTime(new Date())
+        }else if(eve == 7){
+          this.getLastYearFirstDay()
+          this.getLastYearLastDay()
+        }
+        console.log('eve',eve);
+      },
+      // 详情数据源
+      Getdialyzerdetail(name){
+        const params={
+          dialyzer:name,
+          start_date:this.start_date,
+          end_date:this.end_date,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdialyzerdetail(params).then(response =>{
+          if(response.data.state == 1){
+            const list = response.data.data.prescriptions
+            const table=[]
+            list.forEach((item,index)=>{
+              const obj ={
+                index:index+1,
+                dialysis_no:item.patient.dialysis_no,
+                name:item.patient.name,
+                date:this.getTime(item.record_date),
+                mode_name:this.getmode(item.mode_id),
+                dialyszers:item.dialysis_dialyszers +'  '+ item.dialysis_irrigation+'  '+item.dialysis_strainer
+                // dialyszers:item.dialysis_dialyszers || item.dialysis_irrigation || item.dialysis_strainer
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+          console.log('77777',response);
+        })
+      },
+       // 首先定义一个getPreviousDate函数，方便调用
+      getPreviousDate(numOfDays) {
+        var date = new Date();
+        date.setDate(date.getDate() - numOfDays);
+        var year = date.getFullYear();
+        if(date.getMonth() + 1<10){
+          var month = '0'+(date.getMonth() + 1);
+        }else{
+          var month = date.getMonth() + 1;
+        }
+
+        if(date.getDate()<10){
+          var day = '0'+date.getDate();
+        }else{
+          var day = date.getDate();
+        }
+        return year + "-" + month + "-" + day;
+      },
+      // 本周
+      getFirstDayOfWeek(date){
+        var weekday = date.getDay()
+        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化
+        return this.timeFormat(date);
+      },
+      // 本月
+      getFirstDayOfMonth (date) {
+        date.setDate(1);
+        return this.timeFormat(date);
+      },
+       //上个月第一天
+      getLastMonthFirstDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          m = m < 10 ? "0" + m : m;
+          this.start_date = [y, m, '01'].join("-")
+          // return [y, m, '01'].join("-");
+      },
+      // 上个月最后一天
+      getLastMonthLastDay() {
+          var date = new Date();
+          date.setDate(0);
+          var y = date.getFullYear(); //获取年份
+          var m = date.getMonth() + 1; //获取月份
+          var d = new Date(y, m, 0).getDate(); //获取当月最后一日
+          m = m < 10 ? "0" + m : m; //月份补 0
+          d = d < 10 ? "0" + d : d; //日数补 0
+          this.end_date = [y, m, d].join("-")
+          // return [y, m, d].join("-");
+      },
+      // 本年
+      getFirstDayOfYear (date) {
+        date.setDate(1);
+        date.setMonth(0);
+        return this.timeFormat(date);
+      },
+      // 上一年第一天
+      getLastYearFirstDay() {
+          let date = new Date();
+         const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+         const start_month= date.setMonth(0); // 设置月份为1月（注意月份是从0开始的）
+         const start_day = date.setDate(1); // 设置日期为1日
+        //  const last_month = date.setMonth(11); // 设置月份为12月
+        //  const last_day = date.setDate(0); // 设置日期为0，这将自动设置为该月的最后一天
+        //  this.start_date = year+ "-" +start_month+ "-" +start_day
+         this.start_date = this.getTime(start_day)
+        //  return this.start_date
+      },
+      // 上一年最后一天
+      getLastYearLastDay() {
+          let date = new Date();
+          const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
+          const last_month = date.setMonth(12); // 设置月份为12月
+          const last_day = date.setDate(0);// 设置日期为0，这将自动设置为该月的最后一天
+          // this.end_date =  year+ "-" +last_month+ "-" +last_day
+          this.end_date = this.getTime(last_day)
+          console.log('this.end_date',this.end_date);
+          // return this.end_date;
+      },
+      // 日期格式化
+      timeFormat(date) {
+          if (!date || typeof(date) === "string") {
+            this.error("参数异常，请检查...");
+          }
+          var y = date.getFullYear(); //年
+          if(date.getMonth() + 1<10){
+            var m ='0'+(date.getMonth() + 1); //月
+          }else{
+            var m =date.getMonth() + 1; //月
+          }
+          if(date.getDate() + 1<10){
+            var d ='0'+date.getDate(); //日
+          }else{
+            var d = date.getDate(); //日
+          }
+          // var d = date.getDate(); //日
+
+          return y + "-" + m + "-" + d;
+      },
+      handleCurrentChange(val){
+        this.currentPage = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.Getdialyzerdetail(this.getdialyze(this.dialyze_value))
+      },
+      // 透析模式
+      getmode(ids){
+        const modes=this.modearr
+        for(let i in modes){
+          if(ids == modes[i].id){
+            return modes[i].name
+          }
+        }
+      },
+       // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      dataURLtoBlob(dataURL) {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+          u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+      },
+      // 全部透析器
+      Getdialyzerconfig(){
+        Getdialyzerconfig().then(response =>{
+          console.log('666666',response);
+        })
+      },
+      getdialyze(val){
+        const option = this.dialyze_options
+        for(let i in option){
+          if(val == option[i].id){
+            return option[i].name
+          }
+        }
+      }
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      this.Getdialyzerconfig()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/weightblood/index.vue

@@ -0,0 +1,276 @@
+<!-- 其他指标 -->
+<template>
+  <div class="main-contain">
+    <div class="position">
+<!--        <bread-crumb :crumbs="crumbs"></bread-crumb>-->
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <div class="photos">
+          <div v-for="(item,index) in indicators" :key="index"  @click="echart_click(item)"
+            style="width: 280px;height: 235px;border:1px solid gainsboro;border-radius: 8px;margin: 0 0 30px 28px"
+          >
+            <!-- <div v-if="" class="background date_type1" style="background-repeat: no-repeat;"></div>
+            <div v-if="item.check_type == 1" class="background date_type2" style="background-repeat: no-repeat;"></div>
+            <div v-if="item.check_type == 2" class="background date_type3" style="background-repeat: no-repeat;"></div>
+            <p class="title">{{item.item_name}}</p> -->
+            <div :class="[item.sub_check_type ==1 ? 'date_type1 background' : item.sub_check_type ==2 ?'date_type2 background':item.sub_check_type ==3 ?'date_type3 background':'']" style="background-repeat: no-repeat;"></div>
+            <!-- <div v-if="item.check_type == 1" class="background date_type2" style="background-repeat: no-repeat;"></div>
+            <div v-if="item.check_type == 2" class="background date_type3" style="background-repeat: no-repeat;"></div> -->
+            <!-- <div v-if="item.check_type == 1" class="background date_type1" style="background-repeat: no-repeat;"></div> -->
+
+            <p class="title" style="text-align: center;">{{item.item_name}}</p>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+import { getStatisticsList } from '../../../api/statistics'
+export default {
+  name:'index',
+  components: {
+      BreadCrumb,
+  },
+  data() {
+      return {
+        indicators:[],
+          activeName: 'first'
+      }
+  },
+  methods:{
+    getStatisticsList(){
+      let params = {
+      }
+      this.indicators = []
+      getStatisticsList(params).then(response => {
+        if (response.data.state == 1) {
+          this.indicators  =  this.indicators.concat(response.data.data.configurationlist)
+          console.log('444444444',this.indicators);
+          for(let i = 0; i < this.indicators.length; i++){
+            this.indicators[i]["check_type"] = 1
+            this.indicators[i]["sub_check_type"] = 1
+          }
+          let obj = {
+            "check_type":1,
+            "item_name":"患者干体重分析",
+            "sub_check_type":2
+          }
+          this.indicators.push(obj)
+          let obj2 = {
+            "check_type":2,
+            "item_name":"患者体重增长分析(以上次透后体重为分母)",
+            "sub_check_type":1
+          }
+          this.indicators.push(obj2)
+          let obj3 = {
+            "check_type":3,
+            "item_name":"患者体重增长分析(以干体重为分母)",
+            "sub_check_type":1
+          }
+          this.indicators.push(obj3)
+
+          let obj4 = {
+            "check_type":4,
+            "item_name":"患者透后体重分析",
+            "sub_check_type":1
+          }
+          this.indicators.push(obj4)
+          let obj5 = {
+            "check_type":5,
+            "item_name":"患者体重详情",
+            "sub_check_type":3
+          }
+          this.indicators.push(obj5)
+          let obj6 = {
+            "check_type":6,
+            "item_name":"患者透前血压分析",
+            "sub_check_type":2
+          }
+          this.indicators.push(obj6)
+
+          let obj7 = {
+            "check_type":7,
+            "item_name":"患者透后血压分析",
+            "sub_check_type":2
+          }
+          this.indicators.push(obj7)
+          let obj8 = {
+            "check_type":8,
+            "item_name":"患者血压详情",
+            "sub_check_type":3
+          }
+          this.indicators.push(obj8)
+
+          console.log( this.indicators)
+          // this.indicators.push("")
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+    },
+    echart_click(item){
+      if(item.check_type == 1){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/dry_weight')
+      }else if(item.check_type == 2){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/list_denominator')
+      }else if (item.check_type == 3){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/dry_denominator')
+      }else if (item.check_type == 4){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/dialyze_after')
+      } else if(item.check_type == 5){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/weight_table')
+      }else if (item.check_type == 6){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/before_Blood')
+      }else if (item.check_type == 7){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/after_Blood')
+      }else if(item.check_type == 8){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood/blood_table')
+      }
+     
+      
+      console.log('item',item);
+    }
+    // jump(project_id, item_id,project_type){
+    //   this.$router.push('/Dialysisanalysis/qualitycontrol/Indicatorsdetail?project_id='+project_id+"&item_id="+item_id+"&project_type="+parseInt(project_type))
+    // },
+    // handleClick(tab, event) {
+    //   console.log(tab, event);
+    // },
+    // echart_click(item){
+    //   // if(item.check_type == 1){
+    //   //   if(item.sub_check_type == 1){
+    //   //     this.$router.push('/Dialysisanalysis/qualitycontrol/Indicatorsdetail?project_id='+item.inspection_major+"&item_id="+item.inspection_minor+"&project_type="+parseInt(item.id))
+
+    //   //     // this.$router.push('/Dialysisanalysis/qualitycontrol/otherIndicators/components/columnarTotal')
+
+    //   //   }else if(item.sub_check_type == 2){
+    //   //     this.$router.push('/Dialysisanalysis/qualitycontrol/platelets')
+    //   //   }
+    //   // }else if(item.check_type == 2){
+    //   //   this.$router.push('/Dialysisanalysis/qualitycontrol/summary')
+    //   // }
+
+
+    // }
+  },
+  created(){
+  this.getStatisticsList()
+
+}
+}
+</script>
+
+<style lang="scss" scoped>
+
+.page_patientControlAnalysis{
+.background{
+  height: 180px;
+  width: 100%;
+  background-repeat:no-repeat;
+}
+.date_type1{
+  background: url('../../../assets/img/zhuzhuantu.png');
+}
+.date_type2{
+  background: url('../../../assets/img/bingzhuantua.png');
+}
+.date_type3{
+  background: url('../../../assets/img/biaoge.png');
+}
+
+.title{
+  font-size: 18px;
+  margin: 15px 10px;
+  color: #333333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.tag {
+  margin-left: 10px;
+  height: 82px;
+  overflow: auto;
+}
+.use {
+  font-size: 14px;
+  color: #999;
+  margin-left: 10px;
+}
+// .shoucang{
+//   width: 20px;
+//   height: 20px;
+//   margin-right: 15px;
+//   float: right;
+//   background:url('../../../assets/img/xingixnghuise.png')
+// }
+.tags{
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  color: #477ac5;
+  background: #edf4ff;
+  margin-right: 3px;
+  margin-top: 3px;
+  padding: 1px 6px;
+  border-radius: 5px;
+}
+.photos{
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+}
+// .page_patientControlAnalysis {
+
+// .pointTitle {
+//   font-size: 13px;
+// }
+
+// .chartTitle {
+//   font-size: 16px;
+//   font-weight: bold;
+//   color: #000000;
+// }
+
+// .point {
+//   width: 13px;
+//   height: 13px;
+//   background: linear-gradient(
+//       0deg,
+//       rgba(169, 224, 243, 1),
+//       rgba(159, 189, 252, 1)
+//   );
+//   border-radius: 7px;
+//   margin-right: 8px;
+// }
+
+// .pointTitle {
+//   font-size: 13px;
+// }
+
+// }
+
+</style>
+
+<style lang="scss">
+// .page_patientControlAnalysis {
+
+// .el-form-item {
+//   margin-bottom: 0;
+// }
+
+// .cell {
+//   text-align: center;
+// }
+
+// ::-webkit-scrollbar {
+//   height: 15px !important;
+// }
+
+// }
+</style>