提交代码

src/api/qcd.js

@@ -108,3 +108,26 @@ export function GetPersonAdviceData(params) {
   })
 }
 
+
+export function GetQCStatistisData(params) {
+  return request({
+    url: '/api/qc/statistiscall/get',
+    method: 'get',
+    params: params
+  })
+}
+
+export function GetPersonQCStatistisData(params) {
+  return request({
+    url: '/api/qc/statistiscperson/get',
+    method: 'get',
+    params: params
+  })
+}
+
+
+
+
+
+
+

src/lang/zh.js

@@ -104,7 +104,7 @@ export default {
     deviceManage: '院感管理',
     modemanagement: '型号配置',
     dialysisMachineManage: '设备管理',
-    
+
     workforce: '患者排班',
     appointment: '排班管理',
     sign: '治疗签到',
@@ -295,7 +295,8 @@ export default {
     chargeDetailManagement: '收费明细',
     yidiClear: '异地清分',
     zeroSummary: '零用明细汇总',
-    hospitalhistory: '住院历史'
+    hospitalhistory: '住院历史',
+    Dialysisanalysis: '专业质控'
   },
   navbar: {
     logOut: '退出登录',

src/router/modules/Dialysisanalysis.js

@@ -7,7 +7,7 @@ export default {
   name: 'Dialysisanalysis',
   alwaysShow: true,
   meta: {
-    title: '透析分析',
+    title: '专业质控',
     icon: 'statistics'
   },
   children: [
@@ -20,6 +20,67 @@ export default {
         noCache: true
       }
     },
+    {
+      path: '/Dialysisanalysis/qualitycontrol/hemoglobin',
+      component: () => import('@/xt_pages/Dialysisanalysis/hemoglobin/index'),
+      name: 'thyroidGland',
+      meta: {
+        title: '血红蛋白',
+        noCache: true
+      }
+    },
+    {
+      path: '/Dialysisanalysis/qualitycontrol/bloodPotassium',
+      component: () => import('@/xt_pages/Dialysisanalysis/bloodPotassium/index'),
+      name: 'thyroidGland',
+      meta: {
+        title: '血钾',
+        noCache: true
+      }
+    },
+    {
+      path: '/Dialysisanalysis/qualitycontrol/albumin',
+      component: () => import('@/xt_pages/Dialysisanalysis/albumin/index'),
+      name: 'thyroidGland',
+      meta: {
+        title: '白蛋白',
+        noCache: true
+      }
+    },
+    {
+      path: '/Dialysisanalysis/qualitycontrol/bloodPhosphorus',
+      component: () => import('@/xt_pages/Dialysisanalysis/bloodPhosphorus/index'),
+      name: 'thyroidGland',
+      meta: {
+        title: '血磷',
+        noCache: true
+      }
+    }, {
+      path: '/Dialysisanalysis/qualitycontrol/calcium',
+      component: () => import('@/xt_pages/Dialysisanalysis/calcium/index'),
+      name: 'thyroidGland',
+      meta: {
+        title: '钙',
+        noCache: true
+      }},{
+      path: '/Dialysisanalysis/qualitycontrol/platelets',
+      component: () => import('@/xt_pages/Dialysisanalysis/platelets/index'),
+      name: 'thyroidGland',
+      meta: {
+        title: '血小板',
+        noCache: true
+      }
+    },{
+      path: '/Dialysisanalysis/qualitycontrol/print',
+      component: () => import('@/xt_pages/Dialysisanalysis/print/print'),
+      name: 'print',
+      hidden: true,
+      is_menu: false,
+      meta: {
+        title: 'print',
+        noCache: true
+      }
+    }
     // {
     //   path: '/Dialysisanalysis/hemoglobin',
     //   component: () => import('@/xt_pages/Dialysisanalysis/hemoglobin/index'),
@@ -101,7 +162,7 @@ export default {
     //     noCache: true
     //   }
     // },
-   
-  
+
+
   ]
 }

src/views/layout/components/Sidebar/index.vue

@@ -48,7 +48,7 @@ export default {
   },
   created(){
     if(this.navTitle == '透析管理'){
-      let nameArr = ['home','workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'device', 'quality_control'];
+      let nameArr = ['home','workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'device', 'quality_control','Dialysisanalysis'];
       // console.log('permission_routers',this.permission_routers)
       let routerArr = [];
       this.permission_routers.map(item => {
@@ -120,7 +120,7 @@ export default {
             this.$emit('func',a)
           }
         }else if(newVal == '透析管理'){
-          let nameArr = ['home','workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'device', 'quality_control'];
+          let nameArr = ['home','workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'device', 'quality_control','Dialysisanalysis'];
           // console.log('permission_routers',this.permission_routers)
           let routerArr = [];
           this.permission_routers.map(item => {

src/xt_pages/Dialysisanalysis/albumin/albuminall.vue

@@ -1,249 +1,369 @@
 <template>
-    <div>
-        <!-- <div class="content_top">
-            <div class="block">
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="time_month"
-                type="month"
-                placeholder="选择月">
-                </el-date-picker>
-            </div>
-            <div>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-            </div>
-            <div style="width: 200px;">
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
-            </div>
-            <el-button type="primary">查询</el-button>
-        </div> -->
-        
-        <el-row :gutter="20">
-        <el-col :span="5"> 
-          <div class="block">
-            <span>查询时间:</span>
-            <el-date-picker
-            v-model="time_month"
-            type="month"
-            placeholder="选择月">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div>
-            <el-date-picker
-            v-model="stat_time"
+  <div>
+    <el-row :gutter="25">
+      <el-col :span="5">
+        <div class="block">
+          <span>查询时间:</span>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <el-date-picker
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
+
             placeholder="选择日期">
-            </el-date-picker>
-            <span>-</span>
-            <el-date-picker
+          </el-date-picker>
+          <span>-</span>
+          <el-date-picker
+            style="width: 200px"
             v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div style="width: 200px;">
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-        </el-col>
-        <el-col :span="2">
-            <el-button type="primary">查询</el-button>
-        </el-col>
-        </el-row>
-        
-        <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-          <p class="chartTitle">统计图</p>
+          </el-date-picker>
         </div>
-        <div class="echart" id="mychart" :style={width:width,height:height}></div>
-        <div style="width: 80%;margin: auto;">
-            <el-table
-            :data="tableData"
-            :show-summary = true
-            border
-            style="width: 100%;">
-                <el-table-column
-                    prop="date"
-                    align="center"
-                    label="白蛋白"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="name"
-                    
-                    label="人数"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      </el-col>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
+      </el-col>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="白蛋白"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
     </div>
+  </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
-    props: {
-   
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
+  props: {
+
     width: {
       type: String,
-      default: "100%"
+      default: '100%'
     },
     height: {
       type: String,
-      default: "400px"
-    },
-    
+      default: '400px'
+    }
+
   },
-    data() {
-        return {
-            time_month:'',
-            stat_time:'',
-            end_time:'',
-            input:'',
-            myChart: {},
-            pieData : [
-            {
-          value: 463,
-          name: "不达标值患者"
-        },
-        {
-          value: 395,
-          name: "未检查患者"
-        },
-        {
-          value: 157,
-          name: "达标值患者"
-        },
-        // {
-        //   value: 149,
-        //   name: "广东"
-        // },
-        // {
-        //   value: 147,
-        //   name: "湖南"
-        // }
-            
-            ],
-            pieName: [],
-            // myChartStyle:{float: "right", width: "100%", height: "400px"},
-            tableData:[],
-        }
-    },
-    mounted() {
-    this.initDate(); //数据初始化
-    this.initEcharts();
+  data() {
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: [],
+      reference:{},
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
-    initDate() {
-      for (let i = 0; i < this.pieData.length; i++) {
-        this.pieName[i] = this.pieData[i].name;
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
       }
-    },
-    initEcharts() {
-      // 饼图
-      const option = {
-        legend: {
-          // 图例
-          data: this.pieName,
-          left: "10%",
-          top: "30%",
-          orient: "vertical"
-        },
-        color:['#ff7f9f','#fff67f','#1e5feb'],
-        title: {
-          // 设置饼图标题，位置设为顶部居中
-        //   text: "国内院士前五省份图示",
-          top: "0%",
-          left: "center"
-        },
-        series: [
-          {
-            type: "pie",
-            label: {
-              show: true,
-              formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-            },
-            radius: "65%", //饼图半径
-            data: this.pieData
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 2,
+        item_id: 35
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference =  response.data.data.reference
+
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
           }
-        ]
-      };
-    //   console.log(this.seriesData);
-      const optionFree = {
-        series: [
-          {
-            data: this.seriesData,
-            type: "line",
-            smooth: true
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
           }
-        ]
-      };
-      this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
-    },
-    getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
           }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
+          }
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
               }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
+            ]
           }
-        });
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
 
-        return sums;
+      return sums
     },
-    handleClick(id){
-        console.log(id);
+    handleClick(id) {
+      console.log(id)
     }
   }
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    color: #1e5feb;
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/albumin/albuminalone.vue

@@ -1,218 +1,646 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"></line-chart>
+              <!--              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>-->
+              <!--              <line-chart></line-chart>-->
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="白蛋白（g/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.name}}
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                    {{getTime(scope.row.inspect_date)}}
+
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="白蛋白" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.value}}
+                  </template>
+                </el-table-column>
+              </el-table>
+
+
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+import LineChart from '../../qcd/components/LineChart.vue'
+
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'白蛋白g/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'白蛋白g/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let value = order.value
+        let inspect_date = order.inspect_date
+
+        let obj = {
+          '姓名': name,
+          '数值': value,
+          '日期': inspect_date,
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['姓名', '数值', '日期']
+        const filterVal = ['姓名', '数值', '日期']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
     },
-    
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              let obj = {
+                name:resp.data.patient.name,
+                value:resp.data.inspections[i].inspect_value,
+                inspect_date:resp.data.inspections[i].inspect_date
+              }
+              this.tableData.push(obj)
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            console.log(resp.data.inspections)
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            console.log(this.chart.xAxis.data)
+            console.log( this.chart.series[0].data)
+
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 2
+    this.query.item_id = 35
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/bloodPhosphorus/phosphorusall.vue

@@ -1,249 +1,369 @@
 <template>
-    <div>
-        <!-- <div class="content_top">
-            <div class="block">
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="time_month"
-                type="month"
-                placeholder="选择月">
-                </el-date-picker>
-            </div>
-            <div>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-            </div>
-            <div style="width: 200px;">
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
-            </div>
-            <el-button type="primary">查询</el-button>
-        </div> -->
-        <el-row :gutter="20">
-        <el-col :span="5"> 
-          <div class="block">
-            <span>查询时间:</span>
-            <el-date-picker
-            v-model="time_month"
-            type="month"
-            placeholder="选择月">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div>
-            <el-date-picker
-            v-model="stat_time"
+  <div>
+    <el-row :gutter="25">
+      <el-col :span="5">
+        <div class="block">
+          <span>查询时间:</span>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <el-date-picker
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
+
             placeholder="选择日期">
-            </el-date-picker>
-            <span>-</span>
-            <el-date-picker
+          </el-date-picker>
+          <span>-</span>
+          <el-date-picker
+            style="width: 200px"
             v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div style="width: 200px;">
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-        </el-col>
-        <el-col :span="2">
-            <el-button type="primary">查询</el-button>
-        </el-col>
-        </el-row>
-        
-        
-        <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-          <p class="chartTitle">统计图</p>
+          </el-date-picker>
         </div>
-        <div class="echart" id="mychart" :style={width:width,height:height}></div>
-        <div style="width: 80%;margin: auto;">
-            <el-table
-            :data="tableData"
-            :show-summary = true
-            border
-            style="width: 100%;">
-                <el-table-column
-                    prop="date"
-                    align="center"
-                    label="血磷"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="name"
-                    
-                    label="人数"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      </el-col>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
+      </el-col>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="血磷"
+
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
     </div>
+  </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
-    props: {
-   
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
+  props: {
+
     width: {
       type: String,
-      default: "100%"
+      default: '100%'
     },
     height: {
       type: String,
-      default: "400px"
-    },
-    
+      default: '400px'
+    }
+
   },
-    data() {
-        return {
-            time_month:'',
-            stat_time:'',
-            end_time:'',
-            input:'',
-            myChart: {},
-            pieData : [
-            {
-          value: 463,
-          name: "不达标值患者"
-        },
-        {
-          value: 395,
-          name: "未检查患者"
-        },
-        {
-          value: 157,
-          name: "达标值患者"
-        },
-        // {
-        //   value: 149,
-        //   name: "广东"
-        // },
-        // {
-        //   value: 147,
-        //   name: "湖南"
-        // }
-            
-            ],
-            pieName: [],
-            // myChartStyle:{float: "right", width: "100%", height: "400px"},
-            tableData:[],
-        }
-    },
-    mounted() {
-    this.initDate(); //数据初始化
-    this.initEcharts();
+  data() {
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: [],
+      reference:{},
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
-    initDate() {
-      for (let i = 0; i < this.pieData.length; i++) {
-        this.pieName[i] = this.pieData[i].name;
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
       }
-    },
-    initEcharts() {
-      // 饼图
-      const option = {
-        legend: {
-          // 图例
-          data: this.pieName,
-          left: "10%",
-          top: "30%",
-          orient: "vertical"
-        },
-        color:['#ff7f9f','#fff67f','#1e5feb'],
-        title: {
-          // 设置饼图标题，位置设为顶部居中
-        //   text: "国内院士前五省份图示",
-          top: "0%",
-          left: "center"
-        },
-        series: [
-          {
-            type: "pie",
-            label: {
-              show: true,
-              formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-            },
-            radius: "65%", //饼图半径
-            data: this.pieData
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 4,
+        item_id: 169
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference =  response.data.data.reference
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
           }
-        ]
-      };
-    //   console.log(this.seriesData);
-      const optionFree = {
-        series: [
-          {
-            data: this.seriesData,
-            type: "line",
-            smooth: true
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
           }
-        ]
-      };
-      this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
-    },
-    getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
           }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
+          }
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
               }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
+            ]
           }
-        });
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
 
-        return sums;
+      return sums
     },
-    handleClick(id){
-        console.log(id);
+    handleClick(id) {
+      console.log(id)
     }
   }
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    color: #1e5feb;
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/bloodPhosphorus/phosphorusalone.vue

@@ -1,217 +1,646 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"></line-chart>
+              <!--              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>-->
+              <!--              <line-chart></line-chart>-->
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="血磷（mmol/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.name}}
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                    {{getTime(scope.row.inspect_date)}}
+
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="血磷" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.value}}
+                  </template>
+                </el-table-column>
+              </el-table>
+
+
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+import LineChart from '../../qcd/components/LineChart.vue'
+
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'血磷mmol/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'血磷mmol/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let value = order.value
+        let inspect_date = order.inspect_date
+
+        let obj = {
+          '姓名': name,
+          '数值': value,
+          '日期': inspect_date,
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['姓名', '数值', '日期']
+        const filterVal = ['姓名', '数值', '日期']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
     },
-    
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              let obj = {
+                name:resp.data.patient.name,
+                value:resp.data.inspections[i].inspect_value,
+                inspect_date:resp.data.inspections[i].inspect_date
+              }
+              this.tableData.push(obj)
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            console.log(resp.data.inspections)
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            console.log(this.chart.xAxis.data)
+            console.log( this.chart.series[0].data)
+
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 4
+    this.query.item_id = 169
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/bloodPotassium/potassiumall.vue

@@ -1,249 +1,368 @@
 <template>
-    <div>
-        <!-- <div class="content_top">
-            <div class="block">
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="time_month"
-                type="month"
-                placeholder="选择月">
-                </el-date-picker>
-            </div>
-            <div>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-            </div>
-            <div style="width: 200px;">
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
-            </div>
-            <el-button type="primary">查询</el-button>
-        </div> -->
-        
-        <el-row :gutter="20">
-        <el-col :span="5"> 
-          <div class="block">
-            <span>查询时间:</span>
-            <el-date-picker
-            v-model="time_month"
-            type="month"
-            placeholder="选择月">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div>
-            <el-date-picker
-            v-model="stat_time"
+  <div>
+    <el-row :gutter="25">
+      <el-col :span="5">
+        <div class="block">
+          <span>查询时间:</span>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <el-date-picker
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
+
             placeholder="选择日期">
-            </el-date-picker>
-            <span>-</span>
-            <el-date-picker
+          </el-date-picker>
+          <span>-</span>
+          <el-date-picker
+            style="width: 200px"
             v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div style="width: 200px;">
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-        </el-col>
-        <el-col :span="2">
-            <el-button type="primary">查询</el-button>
-        </el-col>
-        </el-row>
-        
-        <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-          <p class="chartTitle">统计图</p>
+          </el-date-picker>
         </div>
-        <div class="echart" id="mychart" :style={width:width,height:height}></div>
-        <div style="width: 80%;margin: auto;">
-            <el-table
-            :data="tableData"
-            :show-summary = true
-            border
-            style="width: 100%;">
-                <el-table-column
-                    prop="date"
-                    align="center"
-                    label="血钾"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="name"
-                    
-                    label="人数"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      </el-col>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
+      </el-col>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="血钾"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
     </div>
+  </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
-    props: {
-   
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
+  props: {
+
     width: {
       type: String,
-      default: "100%"
+      default: '100%'
     },
     height: {
       type: String,
-      default: "400px"
-    },
-    
+      default: '400px'
+    }
+
   },
-    data() {
-        return {
-            time_month:'',
-            stat_time:'',
-            end_time:'',
-            input:'',
-            myChart: {},
-            pieData : [
-            {
-          value: 463,
-          name: "不达标值患者"
-        },
-        {
-          value: 395,
-          name: "未检查患者"
-        },
-        {
-          value: 157,
-          name: "达标值患者"
-        },
-        // {
-        //   value: 149,
-        //   name: "广东"
-        // },
-        // {
-        //   value: 147,
-        //   name: "湖南"
-        // }
-            
-            ],
-            pieName: [],
-            // myChartStyle:{float: "right", width: "100%", height: "400px"},
-            tableData:[],
-        }
-    },
-    mounted() {
-    this.initDate(); //数据初始化
-    this.initEcharts();
+  data() {
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: [],
+      reference:{},
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
-    initDate() {
-      for (let i = 0; i < this.pieData.length; i++) {
-        this.pieName[i] = this.pieData[i].name;
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
       }
-    },
-    initEcharts() {
-      // 饼图
-      const option = {
-        legend: {
-          // 图例
-          data: this.pieName,
-          left: "10%",
-          top: "30%",
-          orient: "vertical"
-        },
-        color:['#ff7f9f','#fff67f','#1e5feb'],
-        title: {
-          // 设置饼图标题，位置设为顶部居中
-        //   text: "国内院士前五省份图示",
-          top: "0%",
-          left: "center"
-        },
-        series: [
-          {
-            type: "pie",
-            label: {
-              show: true,
-              formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-            },
-            radius: "65%", //饼图半径
-            data: this.pieData
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 4,
+        item_id: 48
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference = response.data.data.reference
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
           }
-        ]
-      };
-    //   console.log(this.seriesData);
-      const optionFree = {
-        series: [
-          {
-            data: this.seriesData,
-            type: "line",
-            smooth: true
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
           }
-        ]
-      };
-      this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
-    },
-    getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
+          }
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
           }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
               }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
+            ]
           }
-        });
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
 
-        return sums;
+      return sums
     },
-    handleClick(id){
-        console.log(id);
+    handleClick(id) {
+      console.log(id)
     }
   }
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    color: #1e5feb;
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/bloodPotassium/potassiumalone.vue

@@ -1,217 +1,646 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"></line-chart>
+              <!--              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>-->
+              <!--              <line-chart></line-chart>-->
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="血钾（mmol/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.name}}
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                    {{getTime(scope.row.inspect_date)}}
+
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="血钾" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.value}}
+                  </template>
+                </el-table-column>
+              </el-table>
+
+
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+import LineChart from '../../qcd/components/LineChart.vue'
+
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'血钾mmol/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'血钾mmol/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let value = order.value
+        let inspect_date = order.inspect_date
+
+        let obj = {
+          '姓名': name,
+          '数值': value,
+          '日期': inspect_date,
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['姓名', '数值', '日期']
+        const filterVal = ['姓名', '数值', '日期']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
     },
-    
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              let obj = {
+                name:resp.data.patient.name,
+                value:resp.data.inspections[i].inspect_value,
+                inspect_date:resp.data.inspections[i].inspect_date
+              }
+              this.tableData.push(obj)
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            console.log(resp.data.inspections)
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            console.log(this.chart.xAxis.data)
+            console.log( this.chart.series[0].data)
+
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 4
+    this.query.item_id = 48
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/calcium/calciumall.vue

@@ -1,249 +1,369 @@
 <template>
-    <div>
-        <!-- <div class="content_top">
-            <div class="block">
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="time_month"
-                type="month"
-                placeholder="选择月">
-                </el-date-picker>
-            </div>
-            <div>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-            </div>
-            <div style="width: 200px;">
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
-            </div>
-            <el-button type="primary">查询</el-button>
-        </div> -->
-        
-        <el-row :gutter="20">
-        <el-col :span="5"> 
-          <div class="block">
-            <span>查询时间:</span>
-            <el-date-picker
-            v-model="time_month"
-            type="month"
-            placeholder="选择月">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div>
-            <el-date-picker
-            v-model="stat_time"
+  <div>
+    <el-row :gutter="25">
+      <el-col :span="5">
+        <div class="block">
+          <span>查询时间:</span>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <el-date-picker
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
+
             placeholder="选择日期">
-            </el-date-picker>
-            <span>-</span>
-            <el-date-picker
+          </el-date-picker>
+          <span>-</span>
+          <el-date-picker
+            style="width: 200px"
             v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div style="width: 200px;">
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-        </el-col>
-        <el-col :span="2">
-            <el-button type="primary">查询</el-button>
-        </el-col>
-        </el-row>
-
-        <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-          <p class="chartTitle">统计图</p>
+          </el-date-picker>
         </div>
-        <div class="echart" id="mychart" :style={width:width,height:height}></div>
-        <div style="width: 80%;margin: auto;">
-            <el-table
-            :data="tableData"
-            :show-summary = true
-            border
-            style="width: 100%;">
-                <el-table-column
-                    prop="date"
-                    align="center"
-                    label="钙"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="name"
-                    
-                    label="人数"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      </el-col>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
+      </el-col>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="钙"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
     </div>
+  </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
-    props: {
-   
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
+  props: {
+
     width: {
       type: String,
-      default: "100%"
+      default: '100%'
     },
     height: {
       type: String,
-      default: "400px"
-    },
-    
+      default: '400px'
+    }
+
   },
-    data() {
-        return {
-            time_month:'',
-            stat_time:'',
-            end_time:'',
-            input:'',
-            myChart: {},
-            pieData : [
-            {
-          value: 463,
-          name: "不达标值患者"
-        },
-        {
-          value: 395,
-          name: "未检查患者"
-        },
-        {
-          value: 157,
-          name: "达标值患者"
-        },
-        // {
-        //   value: 149,
-        //   name: "广东"
-        // },
-        // {
-        //   value: 147,
-        //   name: "湖南"
-        // }
-            
-            ],
-            pieName: [],
-            // myChartStyle:{float: "right", width: "100%", height: "400px"},
-            tableData:[],
-        }
-    },
-    mounted() {
-    this.initDate(); //数据初始化
-    this.initEcharts();
+  data() {
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: [],
+      reference:{},
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
-    initDate() {
-      for (let i = 0; i < this.pieData.length; i++) {
-        this.pieName[i] = this.pieData[i].name;
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
       }
-    },
-    initEcharts() {
-      // 饼图
-      const option = {
-        legend: {
-          // 图例
-          data: this.pieName,
-          left: "10%",
-          top: "30%",
-          orient: "vertical"
-        },
-        color:['#ff7f9f','#fff67f','#1e5feb'],
-        title: {
-          // 设置饼图标题，位置设为顶部居中
-        //   text: "国内院士前五省份图示",
-          top: "0%",
-          left: "center"
-        },
-        series: [
-          {
-            type: "pie",
-            label: {
-              show: true,
-              formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-            },
-            radius: "65%", //饼图半径
-            data: this.pieData
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 4,
+        item_id: 289
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference = response.data.data.reference
+
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
           }
-        ]
-      };
-    //   console.log(this.seriesData);
-      const optionFree = {
-        series: [
-          {
-            data: this.seriesData,
-            type: "line",
-            smooth: true
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
           }
-        ]
-      };
-      this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
-    },
-    getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
           }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
+          }
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
               }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
+            ]
           }
-        });
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
 
-        return sums;
+      return sums
     },
-    handleClick(id){
-        console.log(id);
+    handleClick(id) {
+      console.log(id)
     }
   }
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    color: #1e5feb;
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/calcium/calciumalone.vue

@@ -1,217 +1,649 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"
+                          v-if="query.statistics_type != 9 && query.statistics_type != 10"></line-chart>
+              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="钙（mmol/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="钙" align="center">
+                  <template slot-scope="scope">
+                  </template>
+                </el-table-column>
+              </el-table>
+
+              <el-pagination
+                align="right"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="query.page"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="10"
+                background
+                style="margin-top:20px;"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+// import LineChart from '../../qcd/components/LineChart'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+
+export default {
+  components: {
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'钙mmol/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'钙mmol/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let item_name = order.item_name
+        let count = order.count
+        let price = order.price.toFixed(2)
+        let pay_sumamt = (order.price.toFixed(2) * order.count).toFixed(2)
+        let total = order.total.toFixed(2)
+
+        let obj = {
+          '患者姓名': name,
+          '项目名称': item_name,
+          '数量': count,
+          '单价': price,
+          '费用': pay_sumamt,
+          '费用总额': total
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['患者姓名', '项目名称', '数量', '单价', '费用', '费用总额']
+        const filterVal = ['患者姓名', '项目名称', '数量', '单价', '费用', '费用总额']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
     },
-    
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
+    },
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d} {h}:{i}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.tableData.push(resp.data.inspections[i])
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 4
+    this.query.item_id = 289
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/components/BarChart.vue

@@ -0,0 +1,125 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+const animationDuration = 6000;
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "380px"
+    },
+    title: {
+      type: String,
+      default: "chart"
+    },
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartOptions: {}
+    };
+  },
+  mounted() {
+    this.initChart();
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize();
+      }
+    }, 100);
+    window.addEventListener("resize", this.__resizeHanlder);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    window.removeEventListener("resize", this.__resizeHanlder);
+    this.chart.dispose();
+    this.chart = null;
+  },
+  created() {},
+  watch: {
+    options: function() {
+      this.chartOptions = this.options;
+      this.initChart();
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    }
+  },
+  methods: {
+    initChart() {
+      console.log("this.chartOptions", this.chartOptions);
+      this.chart = echarts.init(this.$el, "macarons");
+      this.chart.setOption({
+        title: {
+          text: this.title
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        grid: {
+          left: "2%",
+          right: "2%",
+          bottom: "3%",
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: this.chartOptions.xAxis,
+            axisTick: {
+              alignWithLabel: true
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: "value",
+            axisTick: {
+              show: false
+            }
+          }
+        ],
+        series: [
+          {
+            name: "",
+            type: "bar",
+            stack: "vistors",
+            barWidth: "60%",
+            data: this.chartOptions.series,
+            animationDuration
+          }
+        ]
+      });
+    }
+  }
+};
+</script>

src/xt_pages/Dialysisanalysis/components/LineChart.vue

@@ -0,0 +1,261 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "230px"
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object
+    },
+    title: {
+      type: String,
+      default: "chart"
+    },
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartOptions: {
+        xAxis: [],
+        legend: [],
+        series: []
+      }
+    };
+  },
+  mounted() {
+    this.initChart();
+    if (this.autoResize) {
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    }
+
+    // 监听侧边栏的变化
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    if (this.autoResize) {
+      window.removeEventListener("resize", this.__resizeHanlder);
+    }
+
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);
+
+    this.chart.dispose();
+    this.chart = null;
+  },
+  watch: {
+    // options: function(a) {
+    //   console.log(a)
+    //   this.chartOptions = this.options;
+    //   this.initChart();
+    //   this.__resizeHanlder = debounce(() => {
+    //     if (this.chart) {
+    //       this.chart.resize();
+    //     }
+    //   }, 100);
+    //   window.addEventListener("resize", this.__resizeHanlder);
+    // },
+    options:{
+      handler(newValue,oldValue){
+        this.getInitChart();
+      },
+      deep:true
+    },
+
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      }
+    }
+  },
+  created() {
+    this.chartOptions = this.options;
+    // console.log("this.chartOptions", this.chartOptions, this.options);
+  },
+  methods: {
+    getInitChart() {
+      this.chartOptions = this.options;
+      this.initChart();
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    },
+    // setOptions({ expectedData, actualData } = {}) {
+    //   this.chart.setOption({
+    //     title: {
+    //         text: this.title,
+    //     },
+    //     xAxis: {
+    //       data: this.chartOptions.xAxis,
+    //       boundaryGap: false,
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     grid: {
+    //       left: 50,
+    //       right: 50,
+    //       bottom: 20,
+    //       top: 30,
+    //       containLabel: true
+    //     },
+    //     tooltip: {
+    //       trigger: 'axis',
+    //       axisPointer: {
+    //         type: 'cross'
+    //       },
+    //       padding: [5, 10]
+    //     },
+    //     yAxis: {
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     legend: {
+    //       data: this.chartOptions.legend,
+    //     },
+    //     series: this.chartOptions.series,
+    //   })
+    // },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        // title: {
+        //   text: this.title
+        // },
+        xAxis: {
+          data: this.chartOptions.xAxis.data,
+          // boundaryGap: false
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //x轴颜色
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function(value) {
+              var ret = ""; //拼接加\n返回的类目项
+              var maxLength = 10; //每项显示文字个数
+              var valLength = value.length; //X轴类目项的文字个数
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowN > 1) {
+                //如果类目项的文字大于3,
+                for (var i = 0; i < rowN; i++) {
+                  var temp = ""; //每次截取的字符串
+                  var start = i * maxLength; //开始截取的位置
+                  var end = start + maxLength; //结束截取的位置
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+                  temp = value.substring(start, end) + "\n";
+                  ret += temp; //凭借最终的字符串
+                }
+                return ret;
+              } else {
+                return value;
+              }
+            },
+            textStyle: {
+              color:"#2F3133"
+            }
+          }
+        },
+        grid: {
+          left: 0,
+          right: 50,
+          bottom: 10,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //y轴颜色
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color:"#2F3133"
+            }
+          }
+        },
+        // dataZoom: [
+        //   {
+        //     //Y轴固定,让内容滚动
+        //     type: "slider",
+        //     show: false,
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
+        //     zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+        //   },
+        //   {
+        //     type: "inside",
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80,
+        //     zoomLock: true //锁定区域禁止缩放
+        //   }
+        // ],
+        legend: this.chartOptions.legend,
+        series: this.chartOptions.series,
+        dataZoom: this.chartOptions.dataZoom,
+      });
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.chart.clear();
+      this.setOptions(this.chartData);
+    }
+  }
+};
+</script>

src/xt_pages/Dialysisanalysis/components/LineChart1.vue

@@ -0,0 +1,262 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import { debounce } from "@/utils";
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart"
+    },
+    width: {
+      type: String,
+      default: "100%"
+    },
+    height: {
+      type: String,
+      default: "230px"
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object
+    },
+    title: {
+      type: String,
+      default: "chart"
+    },
+    options: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartOptions: {
+        xAxis: [],
+        legend: [],
+        series: []
+      }
+    };
+  },
+  mounted() {
+    this.initChart();
+    if (this.autoResize) {
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    }
+
+    // 监听侧边栏的变化
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    if (this.autoResize) {
+      window.removeEventListener("resize", this.__resizeHanlder);
+    }
+
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
+    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);
+
+    this.chart.dispose();
+    this.chart = null;
+  },
+  watch: {
+    // options: function(a) {
+    //   console.log(a)
+    //   this.chartOptions = this.options;
+    //   this.initChart();
+    //   this.__resizeHanlder = debounce(() => {
+    //     if (this.chart) {
+    //       this.chart.resize();
+    //     }
+    //   }, 100);
+    //   window.addEventListener("resize", this.__resizeHanlder);
+    // },
+    options:{
+      handler(newValue,oldValue){
+        this.getInitChart();
+      },
+      deep:true
+    },
+
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      }
+    }
+  },
+  created() {
+    this.chartOptions = this.options;
+    // console.log("this.chartOptions", this.chartOptions, this.options);
+  },
+  methods: {
+    getInitChart() {
+      this.chartOptions = this.options;
+      this.initChart();
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize();
+        }
+      }, 100);
+      window.addEventListener("resize", this.__resizeHanlder);
+    },
+    // setOptions({ expectedData, actualData } = {}) {
+    //   this.chart.setOption({
+    //     title: {
+    //         text: this.title,
+    //     },
+    //     xAxis: {
+    //       data: this.chartOptions.xAxis,
+    //       boundaryGap: false,
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     grid: {
+    //       left: 50,
+    //       right: 50,
+    //       bottom: 20,
+    //       top: 30,
+    //       containLabel: true
+    //     },
+    //     tooltip: {
+    //       trigger: 'axis',
+    //       axisPointer: {
+    //         type: 'cross'
+    //       },
+    //       padding: [5, 10]
+    //     },
+    //     yAxis: {
+    //       axisTick: {
+    //         show: false
+    //       }
+    //     },
+    //     legend: {
+    //       data: this.chartOptions.legend,
+    //     },
+    //     series: this.chartOptions.series,
+    //   })
+    // },
+    setOptions({ expectedData, actualData } = {}) {
+      this.chart.setOption({
+        // title: {
+        //   text: this.title
+        // },
+        xAxis: {
+          data: this.chartOptions.xAxis.data,
+          // boundaryGap: false
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //x轴颜色
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            formatter: function(value) {
+              var ret = ""; //拼接加\n返回的类目项
+              var maxLength = 10; //每项显示文字个数
+              var valLength = value.length; //X轴类目项的文字个数
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
+              if (rowN > 1) {
+                //如果类目项的文字大于3,
+                for (var i = 0; i < rowN; i++) {
+                  var temp = ""; //每次截取的字符串
+                  var start = i * maxLength; //开始截取的位置
+                  var end = start + maxLength; //结束截取的位置
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
+                  temp = value.substring(start, end) + "\n";
+                  ret += temp; //凭借最终的字符串
+                }
+                return ret;
+              } else {
+                return value;
+              }
+            },
+            textStyle: {
+              color:"#2F3133"
+            }
+          }
+        },
+        grid: {
+          left: 0,
+          right: 50,
+          bottom: 10,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross"
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: true
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#E5E5E5" //y轴颜色
+            },
+          },
+          axisLabel: {
+            textStyle: {
+              color:"#2F3133"
+            }
+          },
+          max:2
+        },
+        // dataZoom: [
+        //   {
+        //     //Y轴固定,让内容滚动
+        //     type: "slider",
+        //     show: false,
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
+        //     zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
+        //   },
+        //   {
+        //     type: "inside",
+        //     xAxisIndex: [0],
+        //     start: 1,
+        //     end: 80,
+        //     zoomLock: true //锁定区域禁止缩放
+        //   }
+        // ],
+        legend: this.chartOptions.legend,
+        series: this.chartOptions.series,
+        dataZoom: this.chartOptions.dataZoom,
+      });
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, "macarons");
+      this.chart.clear();
+      this.setOptions(this.chartData);
+    }
+  }
+};
+</script>

src/xt_pages/Dialysisanalysis/components/PieChart.vue

@@ -0,0 +1,108 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '380px'
+    },
+    title:{
+      type: String,
+      default: 'chart'
+    },
+    options:{
+      type:Object,
+      default:function(){
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      chart: null,
+      chartOptions:{},
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.__resizeHanlder = debounce(() => {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }, 100)
+    window.addEventListener('resize', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    window.removeEventListener('resize', this.__resizeHanlder)
+    this.chart.dispose()
+    this.chart = null
+  },
+  created(){
+    this.chartOptions = this.options;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption({
+        title: {
+            text: this.title,
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          left: 'center',
+          bottom: '10',
+          data: this.chartOptions.legend,
+        },
+        calculable: true,
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            roseType: 'radius',
+            radius: [15, 95],
+            center: ['50%', '38%'],
+            data: this.chartOptions.series,
+            animationEasing: 'cubicInOut',
+            animationDuration: 2600
+          }
+        ]
+      })
+    }
+  },
+  watch:{
+    "options":function(){
+      this.chartOptions = this.options;
+      this.initChart()
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize() 
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHanlder)
+    }
+    
+  } 
+}
+</script>

src/xt_pages/Dialysisanalysis/hemoglobin/hemoglobinall.vue

@@ -1,248 +1,370 @@
 <template>
-    <div>
-        <!-- <div class="content_top">
-            <div class="block">
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="time_month"
-                type="month"
-                placeholder="选择月">
-                </el-date-picker>
-            </div>
-            <div>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-            </div>
-            <div style="width: 200px;">
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
-            </div>
-            <el-button type="primary">查询</el-button>
-        </div> -->
-        <el-row :gutter="20">
-        <el-col :span="5"> 
-          <div class="block">
-            <span>查询时间:</span>
-            <el-date-picker
-            v-model="time_month"
-            type="month"
-            placeholder="选择月">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div>
-            <el-date-picker
-            v-model="stat_time"
+  <div>
+    <el-row :gutter="25">
+      <el-col :span="5">
+        <div class="block">
+          <span>查询时间:</span>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <el-date-picker
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
+
             placeholder="选择日期">
-            </el-date-picker>
-            <span>-</span>
-            <el-date-picker
+          </el-date-picker>
+          <span>-</span>
+          <el-date-picker
+            style="width: 200px"
             v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div style="width: 200px;">
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-        </el-col>
-        <el-col :span="2">
-            <el-button type="primary">查询</el-button>
-        </el-col>
-        </el-row>
-        
-        <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-          <p class="chartTitle">统计图</p>
+          </el-date-picker>
         </div>
-        <div class="echart" id="mychart" :style={width:width,height:height}></div>
-        <div style="width: 80%;margin: auto;">
-            <el-table
-            :data="tableData"
-            :show-summary = true
-            border
-            style="width: 100%;">
-                <el-table-column
-                    prop="date"
-                    align="center"
-                    label="血红蛋白"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="name"
-                    
-                    label="人数"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      </el-col>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
+      </el-col>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="血红蛋白"
+
+
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
     </div>
+  </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
-    props: {
-   
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
+  props: {
+
     width: {
       type: String,
-      default: "100%"
+      default: '100%'
     },
     height: {
       type: String,
-      default: "400px"
-    },
-    
+      default: '400px'
+    }
+
   },
-    data() {
-        return {
-            time_month:'',
-            stat_time:'',
-            end_time:'',
-            input:'',
-            myChart: {},
-            pieData : [
-            {
-          value: 463,
-          name: "不达标值患者"
-        },
-        {
-          value: 395,
-          name: "未检查患者"
-        },
-        {
-          value: 157,
-          name: "达标值患者"
-        },
-        // {
-        //   value: 149,
-        //   name: "广东"
-        // },
-        // {
-        //   value: 147,
-        //   name: "湖南"
-        // }
-            
-            ],
-            pieName: [],
-            // myChartStyle:{float: "right", width: "100%", height: "400px"},
-            tableData:[],
-        }
-    },
-    mounted() {
-    this.initDate(); //数据初始化
-    this.initEcharts();
+  data() {
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      reference:{},
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
-    initDate() {
-      for (let i = 0; i < this.pieData.length; i++) {
-        this.pieName[i] = this.pieData[i].name;
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
       }
-    },
-    initEcharts() {
-      // 饼图
-      const option = {
-        legend: {
-          // 图例
-          data: this.pieName,
-          left: "10%",
-          top: "30%",
-          orient: "vertical"
-        },
-        color:['#ff7f9f','#fff67f','#1e5feb'],
-        title: {
-          // 设置饼图标题，位置设为顶部居中
-        //   text: "国内院士前五省份图示",
-          top: "0%",
-          left: "center"
-        },
-        series: [
-          {
-            type: "pie",
-            label: {
-              show: true,
-              formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-            },
-            radius: "65%", //饼图半径
-            data: this.pieData
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 1,
+        item_id: 17
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference = response.data.data.reference
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
           }
-        ]
-      };
-    //   console.log(this.seriesData);
-      const optionFree = {
-        series: [
-          {
-            data: this.seriesData,
-            type: "line",
-            smooth: true
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
           }
-        ]
-      };
-      this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
-    },
-    getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
+          }
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
           }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
+          }
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
               }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
+            ]
           }
-        });
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
 
-        return sums;
+      return sums
     },
-    handleClick(id){
-        console.log(id);
+    handleClick(id) {
+      console.log(id)
     }
   }
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    color: #1e5feb;
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/hemoglobin/hemoglobinalone.vue

@@ -1,217 +1,646 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"></line-chart>
+              <!--              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>-->
+              <!--              <line-chart></line-chart>-->
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="血红蛋白（g/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.name}}
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                    {{getTime(scope.row.inspect_date)}}
+
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="血红蛋白" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.value}}
+                  </template>
+                </el-table-column>
+              </el-table>
+
+
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+import LineChart from '../../qcd/components/LineChart.vue'
+
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'血红蛋白g/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'血红蛋白g/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let value = order.value
+        let inspect_date = order.inspect_date
+
+        let obj = {
+          '姓名': name,
+          '数值': value,
+          '日期': inspect_date,
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['姓名', '数值', '日期']
+        const filterVal = ['姓名', '数值', '日期']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
     },
-    
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              let obj = {
+                name:resp.data.patient.name,
+                value:resp.data.inspections[i].inspect_value,
+                inspect_date:resp.data.inspections[i].inspect_date
+              }
+              this.tableData.push(obj)
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            console.log(resp.data.inspections)
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            console.log(this.chart.xAxis.data)
+            console.log( this.chart.series[0].data)
+
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 1
+    this.query.item_id = 17
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/otherIndicators/otherall.vue

@@ -27,9 +27,9 @@
             </div>
             <el-button type="primary">查询</el-button>
         </div> -->
-        
+
         <el-row :gutter="20">
-        <el-col :span="5"> 
+        <el-col :span="5">
           <div class="block">
             <span>查询时间:</span>
             <el-date-picker
@@ -63,7 +63,7 @@
             <el-button type="primary">查询</el-button>
         </el-col>
         </el-row>
-        
+
         <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
           <p class="chartTitle">统计图</p>
         </div>
@@ -82,20 +82,20 @@
                 </el-table-column>
                 <el-table-column
                     prop="name"
-                    
+
                     label="人数"
                     >
                 </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
+<!--                <el-table-column-->
+<!--                    prop="address"-->
+<!--                    align="center"-->
+<!--                    label="操作">-->
+<!--                    <template slot-scope="scope">-->
+<!--                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                                type="text" >查看详情-->
+<!--                        </el-button>-->
+<!--                    </template>-->
+<!--                </el-table-column>-->
             </el-table>
         </div>
     </div>
@@ -104,7 +104,7 @@
 import * as echarts from "echarts";
 export default{
     props: {
-   
+
     width: {
       type: String,
       default: "100%"
@@ -113,7 +113,7 @@ export default{
       type: String,
       default: "400px"
     },
-    
+
   },
     data() {
         return {
@@ -143,7 +143,7 @@ export default{
         //   value: 147,
         //   name: "湖南"
         // }
-            
+
             ],
             pieName: [],
             // myChartStyle:{float: "right", width: "100%", height: "400px"},
@@ -183,7 +183,7 @@ export default{
             label: {
               show: true,
               formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
+              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
             },
             radius: "65%", //饼图半径
             data: this.pieData
@@ -246,4 +246,4 @@ export default{
     justify-content: space-around;
     color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/otherIndicators/otheralone.vue

@@ -1,217 +1,649 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"
+                          v-if="query.statistics_type != 9 && query.statistics_type != 10"></line-chart>
+              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="白蛋白（g/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="甲状旁腺激素分析" align="center">
+                  <template slot-scope="scope">
+                  </template>
+                </el-table-column>
+              </el-table>
+
+              <el-pagination
+                align="right"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :current-page="query.page"
+                :page-sizes="[10, 20, 50, 100]"
+                :page-size="10"
+                background
+                style="margin-top:20px;"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="total"
+              ></el-pagination>
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+// import LineChart from '../../qcd/components/LineChart'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+
+export default {
+  components: {
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'白蛋白g/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'白蛋白g/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let item_name = order.item_name
+        let count = order.count
+        let price = order.price.toFixed(2)
+        let pay_sumamt = (order.price.toFixed(2) * order.count).toFixed(2)
+        let total = order.total.toFixed(2)
+
+        let obj = {
+          '患者姓名': name,
+          '项目名称': item_name,
+          '数量': count,
+          '单价': price,
+          '费用': pay_sumamt,
+          '费用总额': total
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['患者姓名', '项目名称', '数量', '单价', '费用', '费用总额']
+        const filterVal = ['患者姓名', '项目名称', '数量', '单价', '费用', '费用总额']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
     },
-    
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
+    },
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d} {h}:{i}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.tableData.push(resp.data.inspections[i])
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 20
+    this.query.item_id = 171
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/platelets/plateletsall.vue

@@ -1,249 +1,369 @@
 <template>
-    <div>
-        <!-- <div class="content_top">
-            <div class="block">
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="time_month"
-                type="month"
-                placeholder="选择月">
-                </el-date-picker>
-            </div>
-            <div>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-            </div>
-            <div style="width: 200px;">
-                <el-input v-model="input" placeholder="请输入内容"></el-input>
-            </div>
-            <el-button type="primary">查询</el-button>
-        </div> -->
-        
-        <el-row :gutter="20">
-        <el-col :span="5"> 
-          <div class="block">
-            <span>查询时间:</span>
-            <el-date-picker
-            v-model="time_month"
-            type="month"
-            placeholder="选择月">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div>
-            <el-date-picker
-            v-model="stat_time"
+  <div>
+    <el-row :gutter="25">
+      <el-col :span="5">
+        <div class="block">
+          <span>查询时间:</span>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div>
+          <el-date-picker
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
+
             placeholder="选择日期">
-            </el-date-picker>
-            <span>-</span>
-            <el-date-picker
+          </el-date-picker>
+          <span>-</span>
+          <el-date-picker
+            style="width: 200px"
             v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
             type="date"
             placeholder="选择日期">
-            </el-date-picker>
-          </div>
-        </el-col>
-        <el-col :span="3">
-          <div style="width: 200px;">
-            <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-        </el-col>
-        <el-col :span="2">
-            <el-button type="primary">查询</el-button>
-        </el-col>
-        </el-row>
-        
-        <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-          <p class="chartTitle">统计图</p>
+          </el-date-picker>
         </div>
-        <div class="echart" id="mychart" :style={width:width,height:height}></div>
-        <div style="width: 80%;margin: auto;">
-            <el-table
-            :data="tableData"
-            :show-summary = true
-            border
-            style="width: 100%;">
-                <el-table-column
-                    prop="date"
-                    align="center"
-                    label="血小板"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="name"
-                    
-                    label="人数"
-                    >
-                </el-table-column>
-                <el-table-column
-                    prop="address"
-                    align="center"
-                    label="操作">
-                    <template slot-scope="scope">
-                        <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                                type="text" >查看详情
-                        </el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
+      </el-col>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
+      </el-col>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
+      </el-col>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="血小板"
+
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
     </div>
+  </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
-    props: {
-   
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
+  props: {
+
     width: {
       type: String,
-      default: "100%"
+      default: '100%'
     },
     height: {
       type: String,
-      default: "400px"
-    },
-    
+      default: '400px'
+    }
+
   },
-    data() {
-        return {
-            time_month:'',
-            stat_time:'',
-            end_time:'',
-            input:'',
-            myChart: {},
-            pieData : [
-            {
-          value: 463,
-          name: "不达标值患者"
-        },
-        {
-          value: 395,
-          name: "未检查患者"
-        },
-        {
-          value: 157,
-          name: "达标值患者"
-        },
-        // {
-        //   value: 149,
-        //   name: "广东"
-        // },
-        // {
-        //   value: 147,
-        //   name: "湖南"
-        // }
-            
-            ],
-            pieName: [],
-            // myChartStyle:{float: "right", width: "100%", height: "400px"},
-            tableData:[],
-        }
-    },
-    mounted() {
-    this.initDate(); //数据初始化
-    this.initEcharts();
+  data() {
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      reference:{},
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: []
+    }
+  },
+  mounted() {
+    this.getData()
   },
   methods: {
-    initDate() {
-      for (let i = 0; i < this.pieData.length; i++) {
-        this.pieName[i] = this.pieData[i].name;
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
       }
-    },
-    initEcharts() {
-      // 饼图
-      const option = {
-        legend: {
-          // 图例
-          data: this.pieName,
-          left: "10%",
-          top: "30%",
-          orient: "vertical"
-        },
-        color:['#ff7f9f','#fff67f','#1e5feb'],
-        title: {
-          // 设置饼图标题，位置设为顶部居中
-        //   text: "国内院士前五省份图示",
-          top: "0%",
-          left: "center"
-        },
-        series: [
-          {
-            type: "pie",
-            label: {
-              show: true,
-              formatter:"{b} : {d}% ({c})"
-              // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-            },
-            radius: "65%", //饼图半径
-            data: this.pieData
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 1,
+        item_id: 166
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference = response.data.data.reference
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
           }
-        ]
-      };
-    //   console.log(this.seriesData);
-      const optionFree = {
-        series: [
-          {
-            data: this.seriesData,
-            type: "line",
-            smooth: true
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
           }
-        ]
-      };
-      this.myChart = echarts.init(document.getElementById("mychart"));
-      this.myChart.setOption(option);
-      //随着屏幕大小调节图表
-      window.addEventListener("resize", () => {
-        this.myChart.resize();
-      });
-    },
-    getSummaries(param) {
-        const { columns, data } = param;
-        const sums = [];
-        columns.forEach((column, index) => {
-          if (index === 0) {
-            sums[index] = '总价';
-            return;
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
           }
-          const values = data.map(item => Number(item[column.property]));
-          if (!values.every(value => isNaN(value))) {
-            sums[index] = values.reduce((prev, curr) => {
-              const value = Number(curr);
-              if (!isNaN(value)) {
-                return prev + curr;
-              } else {
-                return prev;
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
+          }
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
               }
-            }, 0);
-            sums[index] += ' 元';
-          } else {
-            sums[index] = 'N/A';
+            ]
           }
-        });
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = '总价'
+          return
+        }
+        const values = data.map(item => Number(item[column.property]))
+        if (!values.every(value => isNaN(value))) {
+          sums[index] = values.reduce((prev, curr) => {
+            const value = Number(curr)
+            if (!isNaN(value)) {
+              return prev + curr
+            } else {
+              return prev
+            }
+          }, 0)
+          sums[index] += ' 元'
+        } else {
+          sums[index] = 'N/A'
+        }
+      })
 
-        return sums;
+      return sums
     },
-    handleClick(id){
-        console.log(id);
+    handleClick(id) {
+      console.log(id)
     }
   }
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    color: #1e5feb;
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/platelets/plateletsalone.vue

@@ -1,217 +1,646 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"></line-chart>
+              <!--              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>-->
+              <!--              <line-chart></line-chart>-->
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="血小板（/L）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.name}}
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                    {{getTime(scope.row.inspect_date)}}
+
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="血小板" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.value}}
+                  </template>
+                </el-table-column>
+              </el-table>
+
+
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            myChart: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            tableData:[],
+import echarts from 'echarts'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+import LineChart from '../../qcd/components/LineChart.vue'
+
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-		// })  
-        // this.myChart = echarts.init(document.getElementById("germychart"));
-        //     this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
-    },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                legend: {
-                    show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'血小板/L'}]
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'血小板/L',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            this.myChart = echarts.init(document.getElementById("germychart"));
-            this.myChart.setOption(option);
-            //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                this.myChart.resize();
-            });
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let value = order.value
+        let inspect_date = order.inspect_date
+
+        let obj = {
+          '姓名': name,
+          '数值': value,
+          '日期': inspect_date,
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['姓名', '数值', '日期']
+        const filterVal = ['姓名', '数值', '日期']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
     },
-    
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              let obj = {
+                name:resp.data.patient.name,
+                value:resp.data.inspections[i].inspect_value,
+                inspect_date:resp.data.inspections[i].inspect_date
+              }
+              this.tableData.push(obj)
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            console.log(resp.data.inspections)
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+              this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+            }
+            console.log(this.chart.xAxis.data)
+            console.log( this.chart.series[0].data)
+
+            this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
+    },
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 1
+    this.query.item_id = 166
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/print/print.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+      <el-row style="float:right;">
+        <el-col :span="24">
+          <el-button
+            size="small"
+            icon="el-icon-printer"
+            type="primary"
+            @click="printAction"
+          >打印</el-button
+          >
+        </el-col>
+      </el-row>
+    </div>
+    <div class="app-container" style="background-color: white;">
+      <div id="print_content">
+        <div class="print_main_content">
+          <div class="order_title_panl">
+            <span class="main_title">{{reference.item_name}}详情</span>
+          </div>
+          <div class="table_panel">
+            <table class="table">
+              <thead>
+              <tr>
+                <td width="50">序号</td>
+                <td width="100" >透析号</td>
+                <td width="70">患者姓名</td>
+                <td width="70">检查日期</td>
+                <td width="70" >结果</td>
+              </tr>
+              </thead>
+              <tbody>
+              <tr v-for="(item, index) in checkData" :key="index">
+                <td :width="td_1_width">{{index + 1}}</td>
+                <td :width="td_1_width">
+                  <span>{{item.dialysis_no}}</span>
+                </td>
+                <td :width="td_1_width">{{item.name}}</td>
+                <td :width="td_1_width">{{getTime(item.check_date)}}</td>
+                <td :width="td_1_width">{{item.result}}</td>
+              </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GetPersonQCStatistisData } from '@/api/qcd'
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+import print from 'print-js'
+import { jsGetAge, uParseTime } from '@/utils/tools'
+
+export default {
+  name: 'SchedulePrint',
+  data() {
+    return {
+      checkData:[],
+      crumbs: [
+        { path: false, name: '专业质控' },
+        { path: false, name: '检验详情打印' }
+      ],
+      scheduleData:[],
+      week_type: 0,
+      day:'',
+      td_1_width: '10%',
+      td_2_width: '10%',
+      td_3_width: '25%',
+      td_4_width: '45%',
+      modeOptions: null,
+      anticoagulants_confit:null,
+      currentDate:'',
+      org_id:0,
+      printObj:{},
+      week_time:0,
+      zone:0,
+      reference:null,
+    }
+  },
+  components: {
+    BreadCrumb
+  },
+  created() {
+    var patient_id = this.$route.query.patient_id
+    var project_id  = this.$route.query.project_id
+    var item_id  = this.$route.query.item_id
+    var start_time  = this.$route.query.start_time
+    var end_time  = this.$route.query.end_time
+
+    const params = {
+      patient_id:patient_id,
+      project_id:project_id,
+      item_id:item_id,
+      start_time: start_time,
+      end_time: end_time
+    }
+    GetPersonQCStatistisData(params).then(response=>{
+      if(response.data.state ==1){
+        let dialysis_no = response.data.data.patient.dialysis_no
+        let name = response.data.data.patient.name
+        this.checkData = []
+        this.reference = response.data.data.reference
+        for(let i = 0; i < response.data.data.inspections.length;i++){
+          let obj ={
+            dialysis_no:dialysis_no,
+            name:name,
+            check_date:response.data.data.inspections[i].inspect_date,
+            result:response.data.data.inspections[i].inspect_value
+          }
+          this.checkData.push(obj)
+
+
+        }
+
+
+      }
+    })
+  },
+  methods: {
+    getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    printAction: function() {
+      const style = '@media print { .print_main_content { background-color: white; width:960px;  margin:0 auto; padding: 0 0 20px 0; } .order_title_panl { text-align: center; } .main_title { font-size: 18px; line-height: 40px; font-weight: 500; } .table_panel { } .table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } thead tr td { border: 1px solid; text-align: center; font-size: 20px; padding: 15px 5px; } tbody tr td { border: 1px solid; text-align: center; font-size: 18px; padding: 10px 5px; } .proj { padding: 5px 0; text-align: left; } .proj_title { font-size: 16px; font-weight: 500; line-height: 25px; } .proj_item { font-size: 15px; line-height: 20px; } .zone_name { font-weight: 500; } }'
+      printJS({
+        printable: 'print_content',
+        type: 'html',
+        documentTitle: '  ',
+        style: style,
+        scanStyles: false
+      })
+    },
+  },
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.print_main_content {
+  background-color: white;
+  max-width: 1500px;
+  margin: 0 auto;
+  padding: 0 0 20px 0;
+
+.order_title_panl {
+  text-align: center;
+
+.main_title {
+  font-size: 18px;
+  line-height: 40px;
+  font-weight: 500;
+}
+}
+.table_panel {
+.table {
+  width: 100%;
+  border: 1px solid;
+  border-collapse: collapse;
+  padding: 2px;
+
+thead {
+tr {
+td {
+  border: 1px solid;
+  text-align: center;
+  font-size: 20px;
+  padding: 15px 5px;
+}
+}
+}
+tbody {
+tr {
+td {
+  border: 1px solid;
+  text-align: center;
+  font-size: 18px;
+  padding: 10px 5px;
+
+.proj {
+  padding: 5px 0;
+  text-align: left;
+
+.proj_title {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 25px;
+}
+
+.proj_item {
+  font-size: 15px;
+  line-height: 20px;
+
+.zone_name {
+  font-weight: 500;
+}
+}
+}
+}
+}
+}
+}
+}
+}
+</style>

src/xt_pages/Dialysisanalysis/qualitycontrol/individual.vue

@@ -1,243 +1,649 @@
 <template>
-    <div>
-       <div class="content_top">
-            <el-autocomplete
-            class="inline-input"
-            v-model="inputValue"
-            :fetch-suggestions="querySearch"
-            :trigger-on-focus="false"
-            placeholder="请输入患者名字或透析号"
-            @select="handleSubmit"
-            ></el-autocomplete>
+  <div class="main-contain">
+    <div class="app-container">
+      <div class="page_process">
+        <new-nav activeName="process"></new-nav>
+        <div class="cell clearfix">
+          <el-form :inline="true">
+            <el-form-item label>
+              <el-autocomplete
+                class="checkSearch"
+                popper-class="my-autocomplete"
+                v-model="search_value"
+                :fetch-suggestions="querySearchAsync"
+                :trigger-on-focus="false"
+                placeholder="请输入病人名字"
+                @select="handleSelect"
+                style="width:160px;"
+              >
+                <i class="el-icon-search el-input__icon" slot="suffix"></i>
+                <template slot-scope="{ item }">
+                  <div class="name">{{ item.name }}</div>
+                </template>
+              </el-autocomplete>
+
+            </el-form-item>
+          </el-form>
+
+          <label class="title">
+            <span class="name">日期查询</span> :
+          </label>
+          <el-date-picker
+            v-model="query.start_time"
+            prefix-icon="el-icon-date"
+            @change="changeTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+          <span class>-</span>
+          <el-date-picker
+            v-model="query.end_time"
+            prefix-icon="el-icon-date"
+            @change="changeEndTime"
+            :editable="false"
+            style="width: 150px;"
+            type="date"
+            placeholder="选择日期时间"
+            align="right"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+          ></el-date-picker>
+
+          <el-button size="small" icon="el-icon-printer" @click="printAction" type="primary">打印
+          </el-button>
+          <el-button size="small" icon="el-icon-printer" @click="exportAction" type="primary">导出
+
+          </el-button>
+        </div>
+
+        <el-container>
+          <div style="width:160px">
+
+            <div class="tableTitle">患者列表</div>
+
+
+            <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500"
+                      :row-style="{ color: '#303133' }"
+                      :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
+                      highlight-current-row
+                      @current-change="handleChange">
+              <el-table-column prop="dialysis_no" label="透析号" width="70" align="center">
+                <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
+              </el-table-column>
+              <el-table-column prop="name" label="姓名" width="90" align="center">
+                <template slot-scope="scope">{{ scope.row.name }}</template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div style="padding-left:10px;flex:1;width:0;">
+            <div class="tableTitle">指标趋势<span style="font-weight:normal">&nbsp;&nbsp;（当前患者: {{patient_name}}）</span></div>
             <div>
-                <span>查询时间:</span>
-                <el-date-picker
-                v-model="stat_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <span>-</span>
-                <el-date-picker
-                v-model="end_time"
-                type="date"
-                placeholder="选择日期">
-                </el-date-picker>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-select v-model="value" placeholder="请选择">
-                    <el-option
-                    v-for="item in options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value">
-                    </el-option>
-                </el-select>
-                <el-button type="primary">查询</el-button>
+              <line-chart :options="chart"></line-chart>
+<!--              <line-chart :options="bar" v-if="query.statistics_type == 9 || query.statistics_type == 10"></line-chart>-->
+<!--              <line-chart></line-chart>-->
+
             </div>
+            <div class="tableTitle">统计表</div>
             <div>
-                <el-button type="primary">打印</el-button>
-                <el-button type="primary">导出</el-button>
-            </div>
-       </div>
-       <div style="margin: 20px 0px;">
-        <h2 >患者列表</h2>
-       </div>
-       <div >
-        <el-row :gutter="20">
-            <el-col :span="4">
-              <div class="grid-content bg-purple">
-                <!-- <span style="font-size: 18px;font-weight: bold;display: block;">患者列表</span> -->
-                <!-- <h2>患者列表</h2> -->
-                <el-table
-                :data="tableData"
-                border
-                style="width: 100%">
-                    <el-table-column
-                        align="center"
-                        prop="date"
-                        label="透析号"
-                       >
-                    </el-table-column>
-                    <el-table-column
-                        align="center"
-                        prop="name"
-                        label="姓名"
-                        >
-                    </el-table-column>
-                </el-table>
-              </div>
-            </el-col>
-            <el-col :span="19">
-               <div class="grid-content bg-purple">
-                <div class="echart" id="germychart" style="width:100%;height:400px"></div>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%"
-                    border
-                    align="center"
-                    max-height="250">
-                    <el-table-column
-                    fixed
-                    prop="date"
-                    label="姓名"
-                   >
-                    </el-table-column>
-                    <el-table-column
-                    prop="name"
-                    label="检查日期"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                    prop="province"
-                    label="甲状旁腺激素（pg/ml）"
-                    >
-                    </el-table-column>
-                    
-                </el-table>
-               </div>
-           </el-col>
-        </el-row>
-       </div>
+              <el-table ref="table" :data="tableData" v-loading="loading" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
+                <el-table-column label="姓名" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.name}}
+                  </template>
+                </el-table-column>
+
+                <el-table-column width="100" label="检查日期" align="center">
+                  <template slot-scope="scope">
+                    {{getTime(scope.row.inspect_date)}}
+
+                  </template>
+                </el-table-column>
 
+                <el-table-column width="100" label="甲状旁腺激素分析" align="center">
+                  <template slot-scope="scope">
+                    {{scope.row.value}}
+                  </template>
+                </el-table-column>
+              </el-table>
+
+
+            </div>
+          </div>
+        </el-container>
+      </div>
     </div>
+  </div>
 </template>
+
+
 <script>
-  import * as echarts from 'echarts'
-export default{
-    // props: {
-    //     width: {
-    //         type: String,
-    //         default: "100%"
-    //     },
-    //     height: {
-    //         type: String,
-    //         default: "400px"
-    //     },
-    
-    // },
-    data() {
-        return {
-            inputValue:'',
-            stat_time:'',
-            end_time:'',
-            value:'',
-            querySearch:'',
-            tableData:[],
-            options:[],
-            myChartTwo: {},
-            xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
-            opinionData: [23, 24, 18, 25, 27, 28, 25], //人数数据
-            // myChartStyle: { float: "left", width: "100%", height: "400px" },//图表样式
-            
+import echarts from 'echarts'
+import {  uParseTime } from '@/utils/tools'
+import { getCurrentOrgPatients } from '@/api/common/common'
+import {
+  GetDefaultPatient,
+} from '@/api/common/statistics'
+import { PostSearch } from '@/api/patient'
+import { getDataConfig } from '@/utils/data'
+import { GetPersonQCStatistisData } from '../../../api/qcd'
+import LineChart from '../../qcd/components/LineChart.vue'
+
+export default {
+  components: {
+    LineChart
+  },
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate(time) {
+          let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
+          return time.getTime() > Date.now() || time.getTime() < threeMonths
+
         }
-    },
-    created(){
-        
-       
-    },
-    mounted() {
-        // this.$nextTick(function() {
-            this.initEcharts();
-            // this.myChartTwo = echarts.init(document.getElementById("germychart"));
-            // this.myChartTwo.setOption(option);
-            // // //随着屏幕大小调节图表
-            // window.addEventListener("resize", () => {
-            //     console.log('asdfgfdhdgfdghdffgasda');
-            //     this.myChartTwo.resize();
-            // });
-            
-            // window.onresize = this.myChartTwo.resize;
-		// })  
-    },
-    // beforeDestroy(){
-    //     window.addEventListener("resize", () => {
-    //         this.myChartTwo.resize();
-    //     });
-    //     const quality = document.getElementById("germychart");
-    //     quality.addEventListener("transitionend", this.__resizeHanlder);
-    // },
-    methods:{
-        handleSubmit(){
-            console.log('asdfa');
-            this.querySearch
+      },
+      patient_name:'',
+      percent:[],
+      patientsData: [],
+      tableData: [],
+      loading: false,
+      search_value: '',
+      total: 0,
+      query: {
+        patient_id: '',
+        statistics_type: 1,
+        start_time: '',
+        end_time: '',
+        limit: 10,
+        page: 1
+      },
+      crumbs: [
+        { path: false, name: '科室质控' },
+        { path: false, name: '指标评估统计' },
+        { path: false, name: '透析过程指标统计' }
+      ],
+      tableData1: [],
+      chart: {
+        title: {
+          text: 'ECharts 入门示例'
         },
-        initEcharts() {
-            this.myChartTwo = echarts.init(document.getElementById("germychart"));
-            console.log('zxczvbbnm,m');
-            const option = {
-                xAxis: {
-                    type: 'category',
-                        boundaryGap:true,
-                        axisTick:{
-                            alignWithLabel:true //保证刻度线和标签对齐
-                        },
-                    data: this.xData,
-                    splitNumber:this.xData.length, //纵坐标数
-                    interval:this.xData //强制设置坐标轴分割间隔
-                },
-                yAxis: {
-                    type: 'value',
-                    boundaryGap: true,
-                    splitNumber:4, //纵坐标数
-                    interval:10 //强制设置坐标轴分割间隔
-                },
-                legend: {
-                    // show: true,
-                    align:'left',//文字在前图标在后
-                    left:'15%',
-                    top:'5%',
-                    data: [{name:'甲状旁腺激素 pg/ml'}]
+        tooltip: {},
+        legend: {
+          data: [],
+          left: 0
+        },
+        xAxis: {
+          data: []
+        },
+        yAxis: {
+          axisLabel: {
+            formatter: '{value} %'
+          },
+          show: false
+        },
+        series: [
+          {
+            name: '',
+            type: 'line',
+            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] }
+                  ])
                 },
-                grid:{
-                    show:true,
-                    left: "5%",
-                    right: "5%",
-                    bottom: "5%"
+                lineStyle:{
+                  color:'#409eff' //改变折线颜色
                 },
-                series: [
-                {
-                    data: this.opinionData,
-                    name:'甲状旁腺激素 pg/ml',
-                    type: "line",// 类型设置为折线图
-                    symbol: 'circle',
-                    itemStyle: {
-                        normal: {
-                            color: '#409eff', //改变折线点的颜色#a80000
-                            lineStyle: {
-                                color: '#409eff' //改变折线颜色
-                            }
-                        }
-                    },
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
+              },
 
-                },
-                
-                ],
-                
-            };
-            
-            this.myChartTwo.setOption(option);
-            // //随着屏幕大小调节图表
-            window.addEventListener("resize", () => {
-                console.log('123456788');
-                this.myChartTwo.resize();
-            });
-            
-            // window.onresize = this.myChartTwo.resize;
+              //鼠标悬停时：
+              emphasis: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ],
+        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 // 锁定区域禁止缩放
+          }
+        ]
+      },
+      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.5)'
+              }
+            }
+          }
+        ]
+      }
+
+    }
+  },
+  methods: {
+    printAction(){
+      this.$router.push({
+        path: "/Dialysisanalysis/qualitycontrol/print?patient_id=" + this.query.patient_id+"&project_id="+this.query.project_id+"&item_id="+this.query.item_id+"&start_time="+this.query.start_time+"&end_time="+this.query.end_time
+      });
+
+    },exportAction(){
+      let list = []
+      for (let i = 0; i < this.tableData.length; i++) {
+        let order = this.tableData[i]
+        let name = order.name
+        let value = order.value
+        let inspect_date = order.inspect_date
+
+        let obj = {
+          '姓名': name,
+          '数值': value,
+          '日期': inspect_date,
+        }
+        list.push(obj)
+      }
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['姓名', '数值', '日期']
+        const filterVal = ['姓名', '数值', '日期']
+        const data = this.formatJson(filterVal, list)
+        excel.export_json_to_excel1({
+          header: tHeader,
+          data,
+          filename: '明细',
+          ref: this.$refs['table'].$el
+        })
+      })
+    },
+    changeProject(val) {
+      this.query.statistics_type = val
+      this.query.page = 1
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleChange(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      this.GetPersonQCStatistisData(this.query)
+      this.GetInspectionCheckIndexTableData(this.query)
+    },
+    handleSizeChange(limit) {
+      this.query.limit = limit
+      this.GetInspectionCheckIndexTableData(this.query)
+
+    },
+    handleCurrentChange(page) {
+      this.query.page = page
+      this.GetPersonQCStatistisData(this.query)
+    },formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeTime(val) {
+      var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
+      if (time > 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.start_time = ''
+      } else {
+        // this.getDialysisList()
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+
+    },
+    changeEndTime(val) {
+      var time =
+        this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
+      if (time < 0) {
+        this.$message.error('结束时间不能小于开始时间')
+        this.query.end_time = ''
+      } else {
+        this.query.page = 1
+        this.GetPersonQCStatistisData(this.query)
+        this.GetInspectionCheckIndexTableData(this.query)
+
+      }
+    },
+    getTimestamp(time) {
+      // 把时间日期转成时间戳
+      return new Date(time).getTime() / 1000
+    },
+    QueryOperaById: function(val) {
+      let vascular_access_desc_name = ''
+      let vascular_access_desc = getDataConfig(
+        'hemodialysis',
+        'vascular_access_desc'
+      )
+      for (let i = 0; i < vascular_access_desc.length; i++) {
+        if (vascular_access_desc[i].id == val) {
+          vascular_access_desc_name = vascular_access_desc[i].name
+        }
+      }
+
+      return vascular_access_desc_name
+    },
+    GetAnticoagulantById: function(val) {
+      let anticoagulan_name = ''
+      var anticoagulantsConfitTwo = this.$store.getters.anticoagulants_confit
+      let anticoagulant = anticoagulantsConfitTwo
+      for (let keys in anticoagulant) {
+        if (anticoagulant[keys].id == val) {
+          anticoagulan_name = anticoagulant[keys].name
+        }
+      }
+      return anticoagulan_name
+    },
+    getModeName(mode_id) {
+      return this.$store.getters.treatment_mode[mode_id] != undefined ? this.$store.getters.treatment_mode[mode_id].name : ''
+    },  getTime(val) {
+      if(val == "" || val == undefined){
+        return ""
+      }else {
+        return uParseTime(val, '{y}-{m}-{d}')
+      }
+    },
+    GetInspectionCheckIndexTableData(params) {
+      this.loading = true
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          console.log("resp=====",resp)
+          if (resp.state == 1) {
+            this.loading = false
+            this.tableData = []
+            for (let i = 0; i < resp.data.inspections.length; i++) {
+              let obj = {
+                name:resp.data.patient.name,
+                value:resp.data.inspections[i].inspect_value,
+                inspect_date:resp.data.inspections[i].inspect_date
+              }
+              this.tableData.push(obj)
+            }
+            this.total = resp.data.total
+
+          } else {
+            this.loading = false
+          }
+        })
+        .catch(error => {
+
+        })
+    },
+    GetPersonQCStatistisData(params) {
+      this.chart.xAxis.data = []
+      this.chart.series[0].data = []
+      this.bar.xAxis.data = []
+      this.bar.series[0].data = []
+      this.percent = []
+      GetPersonQCStatistisData(params)
+        .then(rs => {
+          var resp = rs.data
+          if (resp.state == 1) {
+            console.log(resp.data.inspections)
+              for (let i = 0; i < resp.data.inspections.length; i++) {
+                this.chart.xAxis.data.push(this.getTime(resp.data.inspections[i].inspect_date))
+                this.chart.series[0].data.push(resp.data.inspections[i].inspect_value)
+              }
+              console.log(this.chart.xAxis.data)
+            console.log( this.chart.series[0].data)
+
+              this.getArrLength(this.chart.xAxis.data,1)
+          } else {
+
+          }
+        })
+        .catch(error => {
+        })
+    },
+    handleSelect(val) {
+      this.query.patient_id = val.id
+      this.query.page = 1
+      this.patient_name = val.name
+      for (let i = 0;i < this.patientsData.length; i++){
+        console.log(this.patientsData[i].id)
+        console.log(val.id)
+
+        if (this.patientsData[i].id == val.id){
+          this.$refs.table.setCurrentRow(this.patientsData[i])
+        }
+      }
+
+
+    },
+    querySearchAsync(keyword, cb) {
+      let key = ''
+      if (keyword != undefined) {
+        key = keyword
+      }
+      let searchArray = []
+      PostSearch(key).then(response => {
+        if (response.data.state == 1) {
+          searchArray = response.data.data.patient
+          cb(searchArray)
+        } else {
+          cb([])
+        }
+      })
+    },
+    chooseWay(way) {
+      this.wayType = way
+    }, getCurrentOrgPatients() {
+      getCurrentOrgPatients().then(response => {
+        if (response.data.state == 1) {
+          var patients = response.data.data.patients
+          this.patientsData = patients
+          this.GetDefaultPatient()
+        }
+      })
+    }, GetDefaultPatient() {
+      GetDefaultPatient().then(response => {
+        if (response.data.state == 1) {
+          var patient = response.data.data.patient
+          for (let i = 0;i < this.patientsData.length; i++){
+            if (this.patientsData[i].id == patient.id){
+              this.patient_name = this.patientsData[i].name
+              this.$refs.table.setCurrentRow(this.patientsData[i])
+            }
+          }
+          this.query.patient_id = patient.id
+          this.GetPersonQCStatistisData(this.query)
+
+        }
+      })
+
     },
-    
+    getArrLength(result,type){
+      if(type == 1){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.chart.dataZoom[0].end = dataZoom_end
+        }
+      }else if(type == 2){
+        if(result.length > 10){
+          var dataZoom_end = (10/result.length)*100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }else{
+          var dataZoom_end = 100;
+          this.bar.dataZoom[0].end = dataZoom_end
+        }
+      }
+
+    }
+  }, mounted() {
+    var date = new Date()
+    var year = date.getFullYear() //获取完整的年份(4位)
+    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
+    var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
+    var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
+    this.query.patient_id = 0
+    this.query.end_time = year + '-' + month + '-' + day
+    this.query.start_time = year + '-' + last_month + '-' + day
+    this.query.project_id = 20
+    this.query.item_id = 171
+    this.getCurrentOrgPatients()
+
+    // this.GetPersonQCStatistisData()
+
+
+  }
 }
 </script>
+
 <style lang="scss" scoped>
-.content_top{
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 20px;
+.tableTitle {
+  font-size: 16px;
+  color: #000;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+</style>
+<style lang="scss">
+.page_process {
+.el-tabs{
+  margin-bottom:0 !important;
+}
+.el-button--medium {
+  padding: 10px 8px;
+}
+
+.el-form-item {
+  margin-bottom: 0;
+}
+::-webkit-scrollbar{
+  height: 15px !important;
+}
+
 }
-</style>
+</style>

src/xt_pages/Dialysisanalysis/qualitycontrol/totalSstatistics.vue

@@ -1,255 +1,469 @@
-
 <template>
   <div>
-      <!-- <div class="content_top">
-          <div class="block">
-              <span>查询时间:</span>
-              <el-date-picker
-              v-model="time_month"
-              type="month"
-              placeholder="选择月">
-              </el-date-picker>
-          </div>
-          <div>
-              <el-date-picker
-              v-model="stat_time"
-              type="date"
-              placeholder="选择日期">
-              </el-date-picker>
-              <span>-</span>
-              <el-date-picker
-              v-model="end_time"
-              type="date"
-              placeholder="选择日期">
-              </el-date-picker>
-          </div>
-          <div style="width: 200px;">
-              <el-input v-model="input" placeholder="请输入内容"></el-input>
-          </div>
-          <el-button type="primary">查询</el-button>
-      </div> -->
-      <el-row :gutter="20">
-      <el-col :span="5"> 
+    <el-row :gutter="25">
+      <el-col :span="5">
         <div class="block">
           <span>查询时间:</span>
-          <el-date-picker
-          v-model="time_month"
-          type="month"
-          placeholder="选择月">
-          </el-date-picker>
+          <el-select size="small" v-model="time_type" placeholder="请选择"
+                     style="width:150px;margin-left:10px;" @change="changeItem">
+            <el-option
+              v-for="item,index in times"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
         </div>
       </el-col>
       <el-col :span="8">
         <div>
           <el-date-picker
-          v-model="stat_time"
-          type="date"
-          placeholder="选择日期">
+            style="width: 200px"
+
+            v-model="start_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            type="date"
+
+            placeholder="选择日期">
           </el-date-picker>
           <span>-</span>
           <el-date-picker
-          v-model="end_time"
-          type="date"
-          placeholder="选择日期">
+            style="width: 200px"
+            v-model="end_time"
+            format="yyyy-MM-dd"
+            value-format="yyyy-MM-dd"
+            type="date"
+            placeholder="选择日期">
           </el-date-picker>
         </div>
       </el-col>
-      <el-col :span="3">
-        <div style="width: 200px;">
-          <el-input v-model="input" placeholder="请输入内容"></el-input>
+      <el-col :span="5">
+        <div >
+          <el-input disabled v-model="input" placeholder="请输入内容"></el-input>
         </div>
       </el-col>
-      <el-col :span="2">
-          <el-button type="primary">查询</el-button>
+      <el-col :span="3">
+        <el-button type="primary" @click="getData()">查询</el-button>
       </el-col>
-      </el-row>
-      
-      <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
-        <p class="chartTitle">统计图</p>
-      </div>
-      <div class="echart" id="mychart" :style={width:width,height:height}></div>
-      <div style="width: 80%;margin: auto;">
-          <el-table
-          :data="tableData"
-          :show-summary = true
-          border
-          style="width: 100%;">
-              <el-table-column
-                  prop="date"
-                  align="center"
-                  label="甲状旁腺激素"
-                  >
-              </el-table-column>
-              <el-table-column
-                  prop="name"
-                  
-                  label="人数"
-                  >
-              </el-table-column>
-              <el-table-column
-                  prop="address"
-                  align="center"
-                  label="操作">
-                  <template slot-scope="scope">
-                      <el-button @click="handleClick(scope.row)" style="font-size:16px;"
-                              type="text" >查看详情
-                      </el-button>
-                  </template>
-              </el-table-column>
-          </el-table>
-      </div>
+    </el-row>
+    <div class="cell clearfix" style="margin: 20px; font-weight: bold;">
+      <p class="chartTitle">统计图</p>
+    </div>
+    <div class="echart" id="mychart" :style={width:width,height:height}></div>
+    <div style="width: 80%;margin: auto;">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%;">
+        <el-table-column
+          prop="name"
+          align="center"
+          label="甲状旁腺激素"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="count"
+          label="人数"
+        >
+        </el-table-column>
+<!--        <el-table-column-->
+<!--          prop="address"-->
+<!--          align="center"-->
+<!--          label="操作">-->
+<!--          <template slot-scope="scope">-->
+<!--            <el-button @click="handleClick(scope.row)" style="font-size:16px;"-->
+<!--                       type="text">查看详情-->
+<!--            </el-button>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+      </el-table>
+    </div>
+<!--    <el-dialog class="centerDialog"-->
+<!--               title="打印"-->
+<!--              >-->
+<!--      <el-row :gutter="25">-->
+<!--        <el-col :span="5">-->
+<!--          <div class="block">-->
+<!--            <span>查询时间:</span>-->
+<!--            <el-select size="small" v-model="time_type" placeholder="请选择"-->
+<!--                       style="width:150px;margin-left:10px;" @change="changeItem">-->
+<!--              <el-option-->
+<!--                v-for="item,index in times"-->
+<!--                :key="index"-->
+<!--                :label="item.label"-->
+<!--                :value="item.value">-->
+<!--              </el-option>-->
+<!--            </el-select>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="8">-->
+<!--          <div>-->
+<!--            <el-date-picker-->
+<!--              style="width: 200px"-->
+
+<!--              v-model="start_time"-->
+<!--              format="yyyy-MM-dd"-->
+<!--              value-format="yyyy-MM-dd"-->
+<!--              type="date"-->
+
+<!--              placeholder="选择日期">-->
+<!--            </el-date-picker>-->
+<!--            <span>-</span>-->
+<!--            <el-date-picker-->
+<!--              style="width: 200px"-->
+<!--              v-model="end_time"-->
+<!--              format="yyyy-MM-dd"-->
+<!--              value-format="yyyy-MM-dd"-->
+<!--              type="date"-->
+<!--              placeholder="选择日期">-->
+<!--            </el-date-picker>-->
+<!--          </div>-->
+<!--        </el-col>-->
+<!--        <el-col :span="5">-->
+<!--          <el-select-->
+<!--            placeholder="请选择类型"-->
+<!--            style="width:95%"-->
+<!--          >-->
+<!--            <el-option label="不达标患者" value="1"></el-option>-->
+<!--            <el-option label="未检查患者" value="2"></el-option>-->
+<!--            <el-option label="达标患者" value="3"></el-option>-->
+<!--            <el-option label="不限" value="0"></el-option>-->
+<!--          </el-select>-->
+<!--        </el-col>-->
+<!--        <el-col :span="5">-->
+<!--          <el-select-->
+<!--            placeholder="请选择排序"-->
+<!--            style="width:95%"-->
+<!--          >-->
+<!--            <el-option label="按时间" value="1"></el-option>-->
+<!--            <el-option label="按患者" value="2"></el-option>-->
+<!--            <el-option label="不限" value="0"></el-option>-->
+<!--          </el-select>-->
+<!--        </el-col>-->
+<!--        <el-col :span="3">-->
+<!--          <el-button type="primary" @click="getData()">查询</el-button>-->
+<!--          <el-button type="primary" @click="getData()">打印</el-button>-->
+<!--          <el-button type="primary" @click="getData()">导出</el-button>-->
+
+<!--        </el-col>-->
+<!--      </el-row>-->
+<!--      <div style="width: 80%;margin: auto;">-->
+<!--        <el-table-->
+<!--          :data="tableData"-->
+<!--          border-->
+<!--          style="width: 100%;">-->
+<!--          <el-table-column-->
+<!--            prop="name"-->
+<!--            align="center"-->
+<!--            label="透析号"-->
+<!--          >-->
+<!--          </el-table-column>-->
+<!--          <el-table-column-->
+<!--            prop="count"-->
+<!--            label="姓名"-->
+<!--          >-->
+<!--          </el-table-column>-->
+<!--          <el-table-column-->
+<!--            prop="address"-->
+<!--            align="center"-->
+<!--            label="检查日期">-->
+
+<!--          </el-table-column>-->
+<!--          <el-table-column-->
+<!--            prop="address"-->
+<!--            align="center"-->
+<!--            label="结果">-->
+
+<!--          </el-table-column>-->
+<!--        </el-table>-->
+<!--      </div>-->
+
+<!--    </el-dialog>-->
   </div>
 </template>
 <script>
-import * as echarts from "echarts";
-export default{
+import * as echarts from 'echarts'
+import { GetQCStatistisData } from '../../../api/qcd'
+
+const moment = require('moment')
+
+export default {
   props: {
- 
-  width: {
-    type: String,
-    default: "100%"
-  },
-  height: {
-    type: String,
-    default: "400px"
+
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    }
+
   },
-  
-},
   data() {
-      return {
-          time_month:'',
-          stat_time:'',
-          end_time:'',
-          input:'',
-          myChart: {},
-          pieData : [
-          {
-        value: 463,
-        name: "不达标值患者"
-      },
-      {
-        value: 395,
-        name: "未检查患者"
-      },
-      {
-        value: 157,
-        name: "达标值患者"
-      },
-      // {
-      //   value: 149,
-      //   name: "广东"
-      // },
-      // {
-      //   value: 147,
-      //   name: "湖南"
-      // }
-          
-          ],
-          pieName: [],
-          // myChartStyle:{float: "right", width: "100%", height: "400px"},
-          tableData:[],
-      }
+    return {
+      time_type: 1,
+      times: [
+        { value: 1, label: '本月' },
+        { value: 2, label: '上月' },
+        { value: 3, label: '今年' },
+        { value: 4, label: '上一年' },
+        { value: 5, label: '第一季度' },
+        { value: 6, label: '第二季度' },
+        { value: 7, label: '第三季度' },
+        { value: 8, label: '第四季度' },
+        { value: 9, label: '自定义' }
+
+      ],
+      time_month: '',
+      start_time: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).toLocaleDateString('en-CA'),
+      input: '',
+      myChart: {},
+      pieData: [],
+      pieName: [],
+      // myChartStyle:{float: "right", width: "100%", height: "400px"},
+      tableData: [],
+      reference:{},
+    }
   },
   mounted() {
-  this.initDate(); //数据初始化
-  this.initEcharts();
-},
-methods: {
-  initDate() {
-    for (let i = 0; i < this.pieData.length; i++) {
-      this.pieName[i] = this.pieData[i].name;
-    }
+    this.getData()
   },
-  initEcharts() {
-    // 饼图
-    this.myChart = echarts.init(document.getElementById("mychart"));
-    window.addEventListener("resize", () => {
-      console.log('098765adsfghg');
-      this.myChart.resize();
-    });
-    console.log('09876543454676');
-    const option = {
-      legend: {
-        // 图例
-        data: this.pieName,
-        left: "10%",
-        top: "30%",
-        orient: "vertical"
-      },
-      color:['#ff7f9f','#fff67f','#1e5feb'],
-      title: {
-        // 设置饼图标题，位置设为顶部居中
-      //   text: "国内院士前五省份图示",
-        top: "0%",
-        left: "center"
-      },
-      series: [
-        {
-          type: "pie",
-          label: {
-            show: true,
-            formatter:"{b} : {d}% ({c})"
-            // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})" 
-          },
-          radius: "65%", //饼图半径
-          data: this.pieData
-        }
-      ]
-    };
-  //   console.log(this.seriesData);
-    const optionFree = {
-      series: [
-        {
-          data: this.seriesData,
-          type: "line",
-          smooth: true
+  methods: {
+    getData() {
+      if(this.start_time.length == 0){
+        this.$message.error("请选择开始时间")
+      }
+      if(this.end_time.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time,
+        end_date: this.end_time,
+        project_id: 20,
+        item_id: 171
+      }
+      this.pieData = []
+      this.tableData = []
+      console.log("~~~~~~~~~~")
+      GetQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.reference = response.data.data.reference
+          this.input = response.data.data.reference.range_min + "<=" + response.data.data.reference.item_name + "<=" + response.data.data.reference.range_max
+          let objone = {
+            value:  response.data.data.unusual_total / response.data.data.patient_count,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
+          }
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+            let objtwo = {
+            value:   response.data.data.normal_total / response.data.data.patient_count,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
+          }
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: response.data.data.patient_count / response.data.data.no_check_total,
+            name: '未检查患者',
+            count:response.data.data.no_check_total,
+
+          }
+          this.pieData.push(objthree)
+          this.tableData.push(objthree)
+
+          let objfour = {
+            value: response.data.data.patient_count,
+            name: '合计',
+            count:response.data.data.patient_count,
+          }
+          this.tableData.push(objfour)
+          for (let i = 0; i < this.pieData.length; i++) {
+            this.pieName[i] = this.pieData[i].name
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          window.addEventListener('resize', () => {
+            this.myChart.resize()
+          })
+          const option = {
+            legend: {
+              // 图例
+              data: this.pieName,
+              left: '10%',
+              top: '30%',
+              orient: 'vertical'
+            },
+            color: ['#ff7f9f', '#fff67f', '#1e5feb'],
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  show: true,
+                  formatter: '{b} : {d}% ({c})'
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData
+              }
+            ]
+          }
+          //   console.log(this.seriesData);
+          const optionFree = {
+            series: [
+              {
+                data: this.seriesData,
+                type: 'line',
+                smooth: true
+              }
+            ]
+          }
+          this.myChart = echarts.init(document.getElementById('mychart'))
+          this.myChart.setOption(option)
+        } else {
+          this.$message.error(response.data.msg)
         }
-      ]
-    };
-    this.myChart = echarts.init(document.getElementById("mychart"));
-    this.myChart.setOption(option);
-    //随着屏幕大小调节图表
-  //   window.addEventListener("resize", () => {
-  //     this.myChart.resize();
-  //   });
-  },
-  getSummaries(param) {
-      const { columns, data } = param;
-      const sums = [];
+      })
+
+    },
+    changeItem(val) {
+      const currentDate = new Date()
+      switch (val) {
+        case 1:
+
+          const startOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).toLocaleDateString('en-CA')
+          const endOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfMonth
+          this.end_time = endOfMonth
+          this.getData()
+
+          break
+        case 2:
+          // 上月的起始日期和结束日期
+          const startOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1).toLocaleDateString('en-CA')
+          const endOfLastMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastMonth
+          this.end_time = endOfLastMonth
+          this.getData()
+
+          break
+        case 3:
+          // 今年的起始日期和结束日期
+          const startOfYear = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfYear = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfYear
+          this.end_time = endOfYear
+          this.getData()
+
+          break
+        case 4:
+          // 上一年的起始日期和结束日期
+          const startOfLastYear = new Date(currentDate.getFullYear() - 1, 0, 1).toLocaleDateString('en-CA')
+          const endOfLastYear = new Date(currentDate.getFullYear() - 1, 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfLastYear
+          this.end_time = endOfLastYear
+          this.getData()
+
+          break
+        case 5:
+          // 第一季度的起始日期和结束日期
+          const startOfFirstQuarter = new Date(currentDate.getFullYear(), 0, 1).toLocaleDateString('en-CA')
+          const endOfFirstQuarter = new Date(currentDate.getFullYear(), 2, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFirstQuarter
+          this.end_time = endOfFirstQuarter
+          this.getData()
+
+          break
+        case 6:
+          // 第二季度的起始日期和结束日期
+          const startOfSecondQuarter = new Date(currentDate.getFullYear(), 3, 1).toLocaleDateString('en-CA')
+          const endOfSecondQuarter = new Date(currentDate.getFullYear(), 5, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfSecondQuarter
+          this.end_time = endOfSecondQuarter
+          this.getData()
+
+          break
+        case 7:
+          // 第三季度的起始日期和结束日期
+          const startOfThirdQuarter = new Date(currentDate.getFullYear(), 6, 1).toLocaleDateString('en-CA')
+          const endOfThirdQuarter = new Date(currentDate.getFullYear(), 8, 30).toLocaleDateString('en-CA')
+
+          this.start_time = startOfThirdQuarter
+          this.end_time = endOfThirdQuarter
+          this.getData()
+
+          break
+        case 8:
+          // 第四季度的起始日期和结束日期
+          const startOfFourthQuarter = new Date(currentDate.getFullYear(), 9, 1).toLocaleDateString('en-CA')
+          const endOfFourthQuarter = new Date(currentDate.getFullYear(), 11, 31).toLocaleDateString('en-CA')
+
+          this.start_time = startOfFourthQuarter
+          this.end_time = endOfFourthQuarter
+          this.getData()
+          break
+        case 9:
+          this.start_time = ''
+          this.end_time = ''
+          break
+      }
+    },
+
+
+    getSummaries(param) {
+      const { columns, data } = param
+      const sums = []
       columns.forEach((column, index) => {
         if (index === 0) {
-          sums[index] = '总价';
-          return;
+          sums[index] = '总价'
+          return
         }
-        const values = data.map(item => Number(item[column.property]));
+        const values = data.map(item => Number(item[column.property]))
         if (!values.every(value => isNaN(value))) {
           sums[index] = values.reduce((prev, curr) => {
-            const value = Number(curr);
+            const value = Number(curr)
             if (!isNaN(value)) {
-              return prev + curr;
+              return prev + curr
             } else {
-              return prev;
+              return prev
             }
-          }, 0);
-          sums[index] += ' 元';
+          }, 0)
+          sums[index] += ' 元'
         } else {
-          sums[index] = 'N/A';
+          sums[index] = 'N/A'
         }
-      });
+      })
 
-      return sums;
-  },
-  handleClick(id){
-      console.log(id);
+      return sums
+    },
+    handleClick(id) {
+      console.log(id)
+    }
   }
-}
 
 }
 </script>
 <style lang="scss" scoped>
-.content_top{
+.content_top {
   display: flex;
   justify-content: space-around;
   color: #1e5feb;
 }
-</style>
+</style>

src/xt_pages/hospitalStation/hospitalBatchStatementPrint.vue

@@ -197,7 +197,7 @@ export default {
             return false
           } else {
             let infos = []
-            for(var i  = 0; i < response.data.data.infos; i++){
+            for(var i  = 0; i < response.data.data.infos.length; i++){
               var info = response.data.data.infos[i]
               that.info['patient'] = info.patient
               that.info['diagnosis'] = info.diagnosis
@@ -247,6 +247,9 @@ export default {
               infos.push(that.info)
             }
             that.infos = infos
+            console.log(infos)
+            console.log(that.infos)
+
 
           }
         })

src/xt_pages/outpatientCharges/outpatientChargesManagement.vue

@@ -3658,7 +3658,7 @@ export default {
           "admin_user_id":this.$store.getters.xt_user.user.id,
           'his_patient_id': this.hisPatientInfo.id,
         }
-        if ((this.$store.getters.xt_user.org_id == 10387) || (this.$store.getters.xt_user.org_id == 10318)){
+        if ((this.$store.getters.xt_user.org_id == 10387)){
           try {
             //检测当前浏览器是否支持websocket模式
             window.WebSocket = window.WebSocket || window.MozWebSocket;
@@ -3671,9 +3671,11 @@ export default {
             this.ws.onopen = function(event){
               if (that.$store.getters.xt_user.org_id == 10387){
                 that.ws.send("{\"url\":\"http://10.93.33.243:20001/localcfc/api/hsecfc/localQrCodeQuery\",\"indata\":{\"data\":{\"businessType\":\"01301\",\"deviceType\":\"\",\"officeId\":\"32760\",\"officeName\":\"肾内科\",\"operatorId\":\"admin\",\"operatorName\":\"罗佳菊\",\"orgId\":\"H43082200408\"},\"orgId\":\"H43082200408\",\"transType\":\"ec.query\"}}");
-              }else if(that.$store.getters.xt_user.org_id == 10318){
-                that.ws.send("{\"url\":\"http://igb.hsa.gdgov.cn/prd_nation_eccode/prd_eccode/localcfc/api/hsecfc/localQrCodeQuery\",\"indata\":{\"data\":{\"businessType\":\"01301\",\"deviceType\":\"\",\"officeId\":\"32760\",\"officeName\":\"肾内科\",\"operatorId\":\"admin\",\"operatorName\":\"邹刘阳\",\"orgId\":\"H44011701749\"},\"orgId\":\"H44011701749\",\"transType\":\"ec.query\"}}");
-              }else if(that.$store.getters.xt_user.org_id == 4){
+              }
+              // else if(that.$store.getters.xt_user.org_id == 10318){
+              //   that.ws.send("{\"url\":\"http://igb.hsa.gdgov.cn/prd_nation_eccode/prd_eccode/localcfc/api/hsecfc/localQrCodeQuery\",\"indata\":{\"data\":{\"businessType\":\"01301\",\"deviceType\":\"\",\"officeId\":\"32760\",\"officeName\":\"肾内科\",\"operatorId\":\"admin\",\"operatorName\":\"邹刘阳\",\"orgId\":\"H44011701749\"},\"orgId\":\"H44011701749\",\"transType\":\"ec.query\"}}");
+              // }
+              else if(that.$store.getters.xt_user.org_id == 4){
                 that.ws.send("{\"url\":\"http://igb.hsa.gdgov.cn/prd_nation_eccode/prd_eccode/localcfc/api/hsecfc/localQrCodeQuery\",\"indata\":{\"data\":{\"businessType\":\"01301\",\"deviceType\":\"\",\"officeId\":\"32760\",\"officeName\":\"肾内科\",\"operatorId\":\"admin\",\"operatorName\":\"邹刘阳\",\"orgId\":\"H44011701749\"},\"orgId\":\"H44011701749\",\"transType\":\"ec.query\"}}");
               }
             };