5月31

package.json

@@ -78,6 +78,7 @@
     "vue-clipboard2": "^0.3.1",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
+    "vue-json-excel": "^0.3.0",
     "vue-multiselect": "2.0.8",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.0.1",

src/api/qcd.js

@@ -134,7 +134,6 @@ export function GetAllQCStatistisData(params) {
 }
 
 
-
 export function GetFiveInstatistisc(params) {
   return request({
     url: '/api/qc/patientinspectionstatistis/get',
@@ -147,9 +146,6 @@ export function GetFiveInstatistisc(params) {
 
 
 
-
-
-
 export function GetAllCommonQCStatistisData(params) {
   return request({
     url: '/api/commonqc/statistiscall/get',
@@ -174,3 +170,94 @@ export function GetCommonQCPatientStatistiscPersonData(params) {
     params: params
   })
 }
+
+
+
+
+
+
+// 新质控
+// 透析总量分析
+export function Getdialysistotal(params) {
+  return request({
+    url: '/api/commonqc/dialysis/total',
+    method: 'get',
+    params: params
+  })
+}
+
+// 透析总量详情
+export function Getdialysisdetail(params) {
+  return request({
+    url: '/api/commonqc/dialysis/detail',
+    method: 'get',
+    params: params
+  })
+}
+// 透析总量详情明细
+export function Getdialysisdetailsinfo(params) {
+  return request({
+    url: '/api/commonqc/dialysis/detailsinfo',
+    method: 'get',
+    params: params
+  })
+}
+
+// 抗凝剂类型统计
+export function Getanticoagulant(params) {
+  return request({
+    url: '/api/commonqc/anticoagulant',
+    method: 'get',
+    params: params
+  })
+}
+// 抗凝剂详情
+export function Getdetail(params) {
+  return request({
+    url: '/api/commonqc/anticoagulant/detail',
+    method: 'get',
+    params: params
+  })
+}
+
+// 透析器分析
+export function Getdialyzer(params) {
+  return request({
+    url: '/api/commonqc/dialyzer',
+    method: 'get',
+    params: params
+  })
+}
+// 透析器详情
+export function Getdialyzerdetail(params) {
+  return request({
+    url: '/api/commonqc/dialyzer/detail',
+    method: 'get',
+    params: params
+  })
+}
+// 透析器名称
+export function Getdialyzerconfig(params) {
+  return request({
+    url: '/api/commonqc/dialyzer/config',
+    method: 'get',
+    params: params
+  })
+}
+
+// 透析完成率统计
+export function Getdialysistreatfinish(params) {
+  return request({
+    url: '/api/commonqc/dialysistreat/finish',
+    method: 'get',
+    params: params
+  })
+}
+// 透析器详情
+export function Getdialysistreatdetail(params) {
+  return request({
+    url: '/api/commonqc/dialysistreat/detail',
+    method: 'get',
+    params: params
+  })
+}

src/xt_pages/Dialysisanalysis/new_otherIndicators/components/Total_analysis.vue

@@ -0,0 +1,559 @@
+<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" style="position: relative;">
+        <div style="display: flex;">
+          <div>
+            日期：
+            <el-select v-model="date_value" this 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="mode" placeholder="请选择" style="width: 120px;">
+              <el-option :key='0' label="不限" :value="0">
+              </el-option>
+              <el-option
+                v-for="item in mode_options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+
+            <el-select v-model="date_mode" :disabled="mode==0?true:false" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_mode_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+
+          </div>
+
+          <div style="margin:0 10px;">
+            数据来源:
+            <el-select v-model="source" placeholder="请选择" style="width: 130px;">
+              <el-option
+                v-for="item in source_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </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>
+</template>
+<script>
+import * as echarts from 'echarts';
+import {Getdialysistotal} from '../../../../api/qcd'
+import { uParseTime } from "@/utils/tools";
+import html2canvas from "html2canvas"
+import { forEach } from 'jszip';
+  export default {
+    components:{
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:0,
+        date_mode:1,
+        source:1,
+        mode_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: 0, name: '不限' },{ 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:'以排班为准'}],
+        bar_xAxis:[],
+        // bar: {
+        //   title: {
+        //     text: "ECharts 入门示例"
+        //   },
+        //   tooltip: {},
+        //   legend: {
+        //     data: [],
+        //     left: 0
+        //   },
+        //   xAxis: {
+        //     data: []
+        //   },
+        //   yAxis: {
+        //     axisLabel: {
+        //       formatter: "{value} %"
+        //     },
+        //     show: false
+        //   },
+        //   series: [
+        //     {
+        //       name: "",
+        //       type: "bar",
+        //       data: [],
+        //       barWidth: 30,
+        //       label: {
+        //         normal: {
+        //           show: true,
+        //           position: "top",
+        //           formatter: (params) => {
+        //             // if(this.percent.length > 0){
+        //             //   let str = ''
+        //             //   str = params.data + '('+ this.percent[params.dataIndex] +'%)'
+        //             //   return str
+        //             // }else{
+        //             //   let str = ''
+        //             //   str = params.data
+        //             //   return str
+        //             // }
+        //           }
+        //         }
+        //       },
+        //       //配置样式
+        //       itemStyle: {
+        //         //通常情况下：
+
+        //         //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+        //         normal: {
+        //           color: function(params) {
+        //             //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
+        //             var colorList = [
+        //               ["#A9E0F3", "#9FBDFC"],
+
+        //               ["#FFD7C0", "#FF9994"]
+        //             ];
+
+        //             var index = params.dataIndex;
+        //             if (params.dataIndex >= colorList.length) {
+        //               index = params.dataIndex % colorList.length;
+        //             }
+
+        //             return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        //               { offset: 0, color: colorList[index][0] },
+        //               // { offset: 0.5, color: colorList[index][1] },
+        //               { offset: 1, color: colorList[index][1] }
+        //             ]);
+        //           },
+        //           barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+        //         },
+
+        //         //鼠标悬停时：
+        //         emphasis: {
+        //           shadowBlur: 10,
+        //           shadowOffsetX: 0,
+        //           shadowColor: "rgba(0, 0, 0, 0.2)"
+        //         }
+        //       }
+        //     }
+        //   ],
+        //   dataZoom: [
+        //     {
+        //       // Y轴固定,让内容滚动
+        //       type: 'slider',
+        //       show: false,
+        //       xAxisIndex: [0],
+        //       start: 1,
+        //       end: 20, // 设置X轴刻度之间的间隔(根据数据量来调整)
+        //       zoomLock: true // 锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+        //     },
+        //     {
+        //       type: 'inside',
+        //       xAxisIndex: [0],
+        //       start: 1,
+        //       end: 20,
+        //       zoomLock: true // 锁定区域禁止缩放
+        //     }
+        //   ]
+        // }
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators')
+      },
+      // echarts图表
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        
+        const params={
+          start_date:this.start_date,
+          end_date:this.end_date,
+          mode:this.mode,
+          origin:this.source,
+          time_way:this.date_mode,
+        }
+        Getdialysistotal(params).then(response =>{
+          if(response.data.state ==1){
+            const modeoptions = []
+            const xAxis = []
+            var yAxis = [] 
+            const list = response.data.data.list
+            list.forEach(item =>{
+              const obj ={
+                id:item.mode_id,
+                name:this.getmodearr(item.mode_id)
+              }
+              yAxis.push(item.count)
+              xAxis.push(this.getmodearr(item.mode_id))
+              modeoptions.push(obj)
+            })
+            this.bar_xAxis = xAxis
+            this.mode_options = modeoptions
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: this.bar_xAxis
+              },
+              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 =>{
+            //   console.log('params',params);
+            // })
+            console.log('this.mode_options',this.mode_options,this.bar_xAxis);
+          }
+        })
+      },
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 下载 
+      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);
+
+        })
+      },
+      // 选项转换
+      getmodearr(ids){
+        const option = this.modearr
+        for(let i in option){
+          if(ids == option[i].id){
+            return option[i].name
+          }
+        }
+      },
+      // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      // 选择日期
+      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.gettopMonth()
+        }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);
+      },
+      // 上个月
+      gettopMonth(){
+        var currentDate = new Date();
+        var month=currentDate.getMonth()+(-1);
+        if(month<0){
+          var n = parseInt((-month)/12);
+          month += n*12;
+          currentDate.setFullYear(currentDate.getFullYear()-n);
+        }
+        currentDate = new Date(currentDate.setMonth(month));
+        //获得当前月份0-11  
+        var currentMonth = currentDate.getMonth(); 
+        //获得当前年份4位年  
+        var currentYear = currentDate.getFullYear(); 
+        //获得上一个月的第一天  
+        this.start_date = this.getTime(new Date(currentYear, currentMonth-1,1)); 
+        //获得上一月的最后一天  
+        this.end_date = this.getTime(new Date(currentYear, currentMonth, 0));
+       console.log('11111',this.start_date);
+       console.log('22222',this.end_date);
+      },
+      // 本年
+      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;
+      },
+      // 
+      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 });
+      },
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      // this.gettotal()
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/new_otherIndicators/components/Total_table.vue

@@ -0,0 +1,724 @@
+<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-select v-model="mode"  placeholder="请选择" style="width: 120px;">
+              <el-option :key="0" label="不限" :value="0"></el-option>
+              <el-option
+                v-for="item in mode_options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+
+            <el-select v-model="date_mode" :disabled="mode==0?true:false" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in date_mode_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+
+          </div>
+
+          <div style="margin: 0 10px;">
+            数据来源:
+            <el-select v-model="source" placeholder="请选择" style="width: 130px;">
+              <el-option
+                v-for="item in source_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </div>
+
+          <div>
+            <el-button type="primary" @click="sete_click">查询</el-button>
+            <el-button type="primary" @click="Download_click">下载</el-button>
+          </div>
+        </div>
+        <!-- 表格 -->
+        <div>
+          <el-table :data="patientTableData"
+            style="width: 100%;border-collapse: collapse;" height="400" border
+            @cell-click="cellclick">
+            <el-table-column v-for="column in columns" :key="column.prop" 
+              :prop="column.prop?column.prop:''" :label="column.label?column.label:''">
+            </el-table-column>
+            
+          </el-table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 弹窗 -->
+    <div>
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="80%">
+        <div>
+          <div style="text-align: right;">
+            <el-button type="primary" @click="exportExcel">导出</el-button>
+          </div>
+          <div>
+            <el-table :data="tableData"
+              style="width: 100%">
+              <el-table-column
+                prop="index"
+                label="序号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="date"
+                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="gender"
+                label="性别">
+              </el-table-column>
+              <el-table-column
+                prop="age"
+                label="年龄">
+              </el-table-column>
+              <el-table-column
+                prop="mode_id"
+                label="透析方式"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="jihao"
+                label="机号"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="doctor"
+                label="治疗医生"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="nurse"
+                label="治疗护士">
+              </el-table-column>
+              <el-table-column
+                prop="start_time"
+                label="开始透析时间">
+              </el-table-column>
+              <el-table-column
+                prop="end_time"
+                label="结束透析时间">
+              </el-table-column>
+              <el-table-column
+                prop="shijia_time"
+                label="实际治疗时长">
+              </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="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+    
+  </div>
+</template>
+<script>
+import {Getdialysisdetail,Getdialysisdetailsinfo} from '../../../../api/qcd'
+import { uParseTime } from "@/utils/tools";
+import {getAllNurseList} from '@/api/fallassement'
+import { getAllDoctorList} from "@/api/device"
+import XLSX from 'xlsx';
+export default {
+  data(){
+    return{
+      date_value:4,
+      start_date:'',
+      end_date:this.getTime(new Date()),
+      mode:0,
+      date_mode:1,
+      source:1,
+      dialogVisible:false,
+      tableData:[],
+      columns:[],
+      patientTableData:[],
+      detilarr:[],
+      currentPage:1,
+      limit:50,
+      total:0,
+      nurseList:[],
+      operators:[],
+      docList:[],
+      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:'以排班为准'}],
+      
+    }
+  },
+  methods:{
+    // 返回
+    return_click(){
+      this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators')
+    },
+    // 数据源
+    getdetil(){
+      const params ={
+        start_date:this.start_date,
+        end_date:this.end_date,
+        mode:this.mode,
+        // mode:1,
+        origin:this.source,
+        time_way:this.date_mode,
+      }
+      Getdialysisdetail(params).then(response =>{
+        console.log('00000',response);
+        if(response.data.state == 1){
+          const list = response.data.data.list
+          this.patientTableData = list
+          // this.tableData = list
+          var column = []
+          column = Object.keys(response.data.data.list[0]).map(key => ({
+              prop: key,
+              label: key // 可以自定义表头名称
+            }));
+            // this.tableData = response.data.data.list
+            for(let i in column){
+              if(column[i].label == '日期'){
+                column.splice(i,1)
+              }
+
+            }
+            const arr={
+              label:'日期',
+              prop:'日期'
+            }
+            for(let i in column){
+              if(column[i].label == '合计'){
+                column.splice(i,1)
+              }
+            }
+            const arr1={
+              label:'合计',
+              prop:'合计'
+            }
+            column.unshift(arr)
+            column.push(arr1)
+            this.columns = column
+            
+            const detil = []
+            for(let i in this.columns){
+              detil.push(this.columns[i].label)
+            }
+            this.detilarr = detil
+            // this.tableData = response.data.data.list.map(row => {
+            //   let newRow = {};
+            //   for (let key in row) {
+            //     newRow[key] = row[key] === 0 ? '' : row[key];
+            //   }
+            //   return newRow;
+            // });
+            // console.log('tttt',this.tableData);
+            console.log('hhhhh',this.columns);
+        }
+
+      })
+    },
+    // 打开弹窗
+    cellclick(row, column, cell, event){
+      this.dialogVisible = true
+      const date =row['日期']
+      // const mode_name = column.label
+      var mode_id = ''
+      for(let i in this.mode_options){
+        if(column.label == this.mode_options[i].name){
+          mode_id = this.mode_options[i].id
+        }
+      }
+      const params={
+        date:date,
+        mode:mode_id,
+        origin:this.source,
+        page:this.currentPage,
+        limit:this.limit
+      }
+      this.Getdialysisdetailsinfo(params)
+      // console.log('row',row,this.date);
+      // console.log('column',column);
+      // console.log('cell',cell);
+      // console.log('event',event);
+    },
+    sete_click(){
+      this.getdetil()
+    },
+    // 详情数据源
+    Getdialysisdetailsinfo(params){
+      Getdialysisdetailsinfo(params).then(response =>{
+        if(response.data.state ==1){
+          const list = response.data.data.list
+          const table = []
+          list.forEach((item,index)=>{
+            const arr ={
+              index:index+1,
+              date:this.getTime(item.record_date),
+              dialysis_no:item.patient.dialysis_no,
+              name:item.patient.name,
+              gender:item.patient.gender==1?'男':'女',
+              age:this.analyzeIDCard(item.patient.id_card_no),
+              mode_id:this.getmode(item.mode_id),
+              jihao:item.order.DeviceNumber.number,
+              doctor:this.getdoctor(item.creater),
+              nurse:this.getnurse(item.order.finish_nurse),
+              start_time:this.getTime(item.order.dialysis_date),
+              end_time:this.getTime(item.order.end_time),
+              shijia_time:item.ad.actual_treatment_hour +'h'+item.ad.actual_treatment_minute+'min'
+            }
+            table.push(arr)
+          })
+          this.tableData = table
+          this.total = response.data.data.total
+        }
+        console.log('Getdialysisdetailsinfo',response);
+      })
+    },
+    //导出excel
+    exportExcel(){
+        let tableData = [ 
+          ['序号','日期', '透析号', '患者姓名', '性别','年龄','透析方式', '机号', '治疗医生','治疗护士', '开始透析时间','结束透析时间','实际治疗时长']//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            index+1,
+            item.date,
+            item.dialysis_no,
+            item.name,
+            item.gender,
+            item.age,
+            item.mode_id,
+            item.jihao,
+            item.doctor,
+            item.nurse,
+            item.start_time,
+            item.end_time,
+            item.shijia_time,
+          ]
+          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) // 保存的文件名
+      },
+    //下载
+    Download_click(){
+        let patientTableData = [this.detilarr]
+        // console.log('tttt',tableData);
+        this.patientTableData.forEach((item,index) =>{
+          console.log('item',item);
+          let rowdata=[]
+          rowdata=[
+            item['日期'],
+            item.CRRT,
+            item.CVVH,
+            item.CVVHD,
+            item.CVVHDF,
+            item.HD,
+            item['HD+'],
+            item['HD+HP'],
+            item.HDF,
+            item['HDF+HP'],
+            item.HDP,
+            item.HD高通,
+            item.HF,
+            item.HFD,
+            item.HFD100,
+            item.HFD600,
+            item.HFD800,
+            item.HFD1000,
+            item['HFHD+HP'],
+            item.HFR,
+            item.HP,
+            item.HPD,
+            item['I-HDF'],
+            item.IUF,
+            item['IUF+HD'],
+            item.PE,
+            item.PHF,
+            item.SCUF,
+            item.UF,
+            item['腹水回输'],
+            item['血浆胆红素吸附'],
+            item['血浆胆红素吸附+HDF'],
+            item['血浆胆红素吸附+HP'],
+            item['合计'],
+          ]
+          patientTableData.push(rowdata)
+        })
+        let workSheet = XLSX.utils.aoa_to_sheet(patientTableData);
+        let bookNew = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(bookNew, workSheet, '透析总量详情分析') // 工作簿名称
+        let name = '透析总量详情分析'+ '.xlsx'
+        XLSX.writeFile(bookNew, name) // 保存的文件名
+    },
+    // 首先定义一个getPreviousDate函数，方便调用
+     // 选择日期
+     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.gettopMonth()
+        }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(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);
+    },
+    // 上个月
+    gettopMonth(){
+      var currentDate = new Date();
+      var month=currentDate.getMonth()+(-1);
+      if(month<0){
+        var n = parseInt((-month)/12);
+        month += n*12;
+        currentDate.setFullYear(currentDate.getFullYear()-n);
+      }
+      currentDate = new Date(currentDate.setMonth(month));
+      //获得当前月份0-11  
+      var currentMonth = currentDate.getMonth(); 
+      //获得当前年份4位年  
+      var currentYear = currentDate.getFullYear(); 
+      //获得上一个月的第一天  
+      this.start_date = this.getTime(new Date(currentYear, currentMonth-1,1)); 
+      //获得上一月的最后一天  
+      this.end_date = this.getTime(new Date(currentYear, currentMonth, 0));
+      console.log('11111',this.start_date);
+      console.log('22222',this.end_date);
+    },
+    // 本年
+    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;
+    },
+    // 
+    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 });
+    },
+    // 转换时间
+    getTime(val) {
+      if(val < 0){
+        return ""
+      }
+      if(val == ""){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+     // 计算年龄
+    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 ''
+      }
+      
+    },
+    getmode(ids){
+      const option = this.mode_options
+      for(let i in option){
+        if(option[i].id == ids){
+          return option[i].name
+        }
+      }
+    },
+     // 分页每页条数
+    handleSizeChange(val){
+      console.log('333',val);
+      this.limit = val
+      this.getGetdetail()
+    },
+    // 当前页
+    handleCurrentChange(val){
+      console.log('4444',val);
+      this.currentPage = val
+      this.getGetdetail()
+    },
+    // 护士
+    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
+        }
+      }
+    }
+  },
+  created(){
+    this.start_date = this.getFirstDayOfMonth(new Date())
+    this.getdetil()
+    this.getAllNurseList()
+    this.getAllDoctorList()
+  }
+}
+</script>

src/xt_pages/Dialysisanalysis/new_otherIndicators/components/anticoagulant.vue

@@ -0,0 +1,653 @@
+<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.统计时间段内，所有患者的抗凝剂使用情况，低分子肝素 x 例次，普通肝素 x 例次、无肝素 x 例次。
+                       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="anticoagulant_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="dialyze_value" placeholder="请选择" style="width: 130px;">
+                  <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="80">
+            </el-table-column>
+            <el-table-column
+              prop="dialysis_no"
+              label="透析号"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="患者姓名"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="dialysis_date"
+              label="透析日期"
+              width="150">
+            </el-table-column>
+            <el-table-column
+              prop="mode_name"
+              label="透析模式"
+              width="100">
+            </el-table-column>
+            <el-table-column
+              prop="anticoagulant"
+              label="抗凝剂(首剂)(维持/追加)(总量)">
+              <template slot-scope="scope">
+                {{ scope.row.anticoagulant }}({{ scope.row.shouji }})
+                ({{ scope.row.weichi }})({{ scope.row.zongliang }})
+              </template>
+            </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="anticoagulant_dialog = false">取 消</el-button>
+          <el-button type="primary" @click="anticoagulant_dialog = false">确 定</el-button>
+        </span>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+import XLSX from 'xlsx';
+import {Getanticoagulant,Getdetail} from '../../../../api/qcd'
+import { uParseTime } from "@/utils/tools";
+import html2canvas from "html2canvas"
+  export default {
+    components:{
+      // LineChart,
+      // line_echart
+    },
+    data(){
+      return{
+        date_value:4,
+        start_date:'',
+        end_date:this.getTime(new Date()),
+        mode:'',
+        date_mode:'',
+        source:'',
+        dialyze_value:0,
+        anticoagulant_dialog:false,
+        currentPage:1,
+        limit:50,
+        dialyze_options:[],//抗凝剂选项数组
+        anticoagulant:[],//全部抗凝剂数组
+        tableData:[],
+        total:'',
+       
+        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:'以排班为准'}],
+        bar_xAxis:[],
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators')
+      },
+      // 数据源
+      getecharts(){
+        var chartDom = document.getElementById('mychart')
+        var myChart = echarts.init(chartDom);
+        const params = {
+          start_date:this.start_date,
+          end_date:this.end_date
+        }
+        Getanticoagulant(params).then(response =>{
+          if(response.data.state ==1){
+            const list = response.data.data.data
+            const xAxis = []
+            const yAxis = []
+            const bili = []
+            list.forEach(item =>{
+              xAxis.push(item.name)
+              yAxis.push(item.count)
+              bili.push((item.percentage).toFixed(2))
+            })
+            this.bar_xAxis = xAxis
+            console.log('bili',this.bar_xAxis);
+            const option = {
+              xAxis: {
+                type: 'category',
+                data: xAxis
+              },
+              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.anticoagulant_dialog = true
+              this.getGetdetail()
+              this.getbarxAxis()
+              console.log('params',params);
+            })
+          }
+          console.log('response',response);
+        })
+        
+      },
+      // 详情数据源
+      getGetdetail(){
+        const params ={
+          anticoagulant:this.dialyze_value,
+          start_date:this.start_date,
+          end_date:this.end_date,
+          page:this.currentPage,
+          limit:this.limit,
+        }
+        Getdetail(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,
+                dialysis_date:this.getTime(item.record_date),
+                mode_name:this.getmode(item.mode_id),
+                anticoagulant:this.getanticoagulant(item.anticoagulant),
+                shouji:item.anticoagulant_shouji,
+                weichi:item.anticoagulant_weichi,
+                zongliang:item.anticoagulant_zongliang
+              }
+              table.push(obj)
+            })
+            this.tableData = table
+            this.total = response.data.data.total
+          }
+        })
+      },
+      
+      // 查询
+      sete_click(){
+        this.getecharts()
+      },
+      // 详情查询
+      deil_click(){
+        this.getGetdetail()
+      },
+      //导出excel
+      exportExcel(){
+        let tableData = [ 
+          ['序号', '透析号', '患者姓名', '透析日期','透析模式', '抗凝剂', '首剂','维持/追加', '总量',]//导出表头
+        ]
+        this.tableData.forEach((item,index) =>{
+          let rowdata=[]
+          rowdata=[
+            index+1,
+            item.dialysis_no,
+            item.name,
+            item.dialysis_date,
+            item.mode_name,
+            item.anticoagulant,
+            item.shouji,
+            item.weichi,
+            item.zongliang,
+          ]
+          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) // 保存的文件名
+      },
+       // 下载 
+      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.gettopMonth()
+        }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);
+      },
+      // 上个月
+      gettopMonth(){
+        var currentDate = new Date();
+        var month=currentDate.getMonth()+(-1);
+        if(month<0){
+          var n = parseInt((-month)/12);
+          month += n*12;
+          currentDate.setFullYear(currentDate.getFullYear()-n);
+        }
+        currentDate = new Date(currentDate.setMonth(month));
+        //获得当前月份0-11  
+        var currentMonth = currentDate.getMonth(); 
+        //获得当前年份4位年  
+        var currentYear = currentDate.getFullYear(); 
+        //获得上一个月的第一天  
+        this.start_date = this.getTime(new Date(currentYear, currentMonth-1,1)); 
+        //获得上一月的最后一天  
+        this.end_date = this.getTime(new Date(currentYear, currentMonth, 0));
+       console.log('11111',this.start_date);
+       console.log('22222',this.end_date);
+      },
+      // 本年
+      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;
+      },
+      // 分页每页条数
+      handleSizeChange(val){
+        console.log('333',val);
+        this.limit = val
+        this.getGetdetail()
+      },
+      // 当前页
+      handleCurrentChange(val){
+        console.log('4444',val);
+        this.currentPage = val
+        this.getGetdetail()
+      },
+      // 转换时间
+      getTime(val) {
+        if(val < 0){
+          return ""
+        }
+        if(val == ""){
+          return ""
+        }else {
+          return uParseTime(val, '{y}-{m}-{d}')
+        }
+      },
+      // 获取抗凝剂选项
+      getbarxAxis(){
+        for(let j in this.bar_xAxis){
+          for(let i in this.anticoagulant){
+            if(this.bar_xAxis[j]==this.anticoagulant[i].name){
+              console.log('tttt',this.anticoagulant[i]);
+               this.dialyze_options.push(this.anticoagulant[i])
+            }
+          }
+        }
+      },
+      getmode(ids){
+        const modes=this.modearr
+        for(let i in modes){
+          if(ids == modes[i].id){
+            return modes[i].name
+          }
+        }
+      },
+      getanticoagulant(ids){
+        const option = this.anticoagulant
+        for(let i in option){
+          if(option[i].id == ids){
+            return option[i].name
+          }
+        }
+      },
+      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 });
+      },
+    },
+    mounted(){
+      this.getecharts()
+    },
+    created(){
+      this.start_date = this.getFirstDayOfMonth(new Date())
+      const anticoagulantsarr = this.$store.getters.anticoagulants_confit
+      var arr =[]
+      for(let i in anticoagulantsarr){
+        const obj ={
+          id:anticoagulantsarr[i].id,
+          name:anticoagulantsarr[i].name
+        }
+        arr.push(obj)
+      }
+      this.anticoagulant = arr
+      console.log('this.$',this.anticoagulant);
+      // var may = document.getElementById('mychart')
+      // console.log('document.getElementById(mychart)',this.$refs.mychart);
+      // this.getecharts()
+      // this.bar.xAxis.data= this.bar_xAxis
+    },
+
+  }
+</script>

src/xt_pages/Dialysisanalysis/new_otherIndicators/components/complete.vue

@@ -0,0 +1,724 @@
+<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.统计实际透析时长是否达到处方透析时长，只要实际时长与处方时长的差不超过处方时长±15 分钟，都算达到。
+                        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="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" 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%"
+              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_duration"
+                label="处方透析时长"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="actual_duration"
+                label="实际透析时长"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="diff"
+                label="实际差(min)"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="doctor"
+                label="主治医生"
+                width="">
+              </el-table-column>
+              <el-table-column
+                prop="nurse"
+                label="主治护士">
+              </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:[],
+        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:'以排班为准'}],
+        bar_xAxis:['HD','HDF','HD + HP','HP','HF','SCUF','IUF'],
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators')
+      },
+      // 数据源
+      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
+            const option = {
+                title:{
+                  text:'总数'+total,
+                  left:'5%',
+                  bottom:'5%',
+                  textStyle:{
+                    fontSize:30
+                  }
+                },
+                tooltip: {
+                  trigger: 'item',
+
+                },
+                legend: {
+                  data:yAxis,
+                  left: '10%',
+                  top: '30%',
+                  orient: 'vertical'
+                },
+                series: [
+                  {
+                    name: 'Access From',
+                    type: 'pie',
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    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()
+      },
+       // 下载 
+      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||this.status_value,
+          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.gettopMonth()
+        }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);
+      },
+      // 上个月
+      gettopMonth(){
+        var currentDate = new Date();
+        var month=currentDate.getMonth()+(-1);
+        if(month<0){
+          var n = parseInt((-month)/12);
+          month += n*12;
+          currentDate.setFullYear(currentDate.getFullYear()-n);
+        }
+        currentDate = new Date(currentDate.setMonth(month));
+        //获得当前月份0-11  
+        var currentMonth = currentDate.getMonth(); 
+        //获得当前年份4位年  
+        var currentYear = currentDate.getFullYear(); 
+        //获得上一个月的第一天  
+        this.start_date = this.getTime(new Date(currentYear, currentMonth-1,1)); 
+        //获得上一月的最后一天  
+        this.end_date = this.getTime(new Date(currentYear, currentMonth, 0));
+       console.log('11111',this.getTime(new Date(currentYear, currentMonth-1,1)));
+       console.log('22222',this.getTime(new Date(currentYear, currentMonth, 0)));
+      },
+      // 本年
+      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()
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.getdetail()
+      },
+       // 转换时间
+      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/new_otherIndicators/components/dialyzer.vue

@@ -0,0 +1,656 @@
+<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-select v-model="mode" placeholder="请选择" style="width: 120px;">
+              <el-option
+                v-for="item in mode_options"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+
+            <el-select v-model="date_mode" placeholder="请选择" style="width: 120px;">
+              <el-option
+                v-for="item in date_mode_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+
+          </div>
+
+          <div>
+            数据来源:
+            <el-select v-model="source" placeholder="请选择" style="width: 100px;">
+              <el-option
+                v-for="item in source_options"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </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.统计时间段内，所有患者的抗凝剂使用情况，低分子肝素 x 例次，普通肝素 x 例次、无肝素 x 例次。
+                      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="dialyze_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="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="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:'以排班为准'}],
+        bar_xAxis:['HD','HDF','HD + HP','HP','HF','SCUF','IUF'],
+ 
+      }
+    },
+    methods:{
+      // 返回
+      return_click(){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators')
+      },
+      // 数据源
+      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 =>{
+          if(response.data.state ==1){
+            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,
+              },
+              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)
+            })
+          }
+          console.log('ressponse',response.data.data);
+        })
+       
+      },
+      // 导出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()
+      },
+       // 下载 
+      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.gettopMonth()
+        }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||this.getdialyze(this.dialyze_value),
+          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
+              }
+              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);
+      },
+      // 上个月
+      gettopMonth(){
+        var currentDate = new Date();
+        var month=currentDate.getMonth()+(-1);
+        if(month<0){
+          var n = parseInt((-month)/12);
+          month += n*12;
+          currentDate.setFullYear(currentDate.getFullYear()-n);
+        }
+        currentDate = new Date(currentDate.setMonth(month));
+        //获得当前月份0-11  
+        var currentMonth = currentDate.getMonth(); 
+        //获得当前年份4位年  
+        var currentYear = currentDate.getFullYear(); 
+        //获得上一个月的第一天  
+        this.start_date = this.getTime(new Date(currentYear, currentMonth-1,1)); 
+        //获得上一月的最后一天  
+        this.end_date = this.getTime(new Date(currentYear, currentMonth, 0));
+       console.log('11111',this.start_date);
+       console.log('22222',this.end_date);
+      },
+      // 本年
+      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()
+      },
+      handleSizeChange(val){
+        this.limit = val
+        this.Getdialyzerdetail()
+      },
+      // 透析模式
+      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/new_otherIndicators/index.vue

@@ -0,0 +1,253 @@
+<!-- 其他指标 -->
+<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: 300px;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">{{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":1
+          }
+          this.indicators.push(obj)
+          let obj2 = {
+            "check_type":2,
+            "item_name":"透析总量详情",
+            "sub_check_type":3
+          }
+          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":2
+
+          }
+          this.indicators.push(obj5)
+
+
+          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/new_otherIndicators/Total_analysis')
+      }else if(item.check_type == 2){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/Total_table')
+      }else if (item.check_type == 3){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/anticoagulant')
+      }else if (item.check_type == 4){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/dialyzer')
+      }
+      else if(item.check_type == 5){
+        this.$router.push('/Dialysisanalysis/qualitycontrol/new_otherIndicators/complete')
+      }
+      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>