过程指标

src/api/qcd.js

@@ -6,4 +6,11 @@ export function getdialysistotaldata(params){
         method:'get',
         params:params
     })
+}
+export function GetProcessIndicatorsData(params){
+    return request({
+        url:'/api/qcd/processindicatorsdata',
+        method:'get',
+        params:params
+    })
 }

src/xt_pages/qcd/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: '320px'
+    },
+    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/qcd/processIndicators.vue

@@ -68,8 +68,8 @@
         <span class="name">检验项目</span> :
       </label>
       <el-select v-model="listQuery.project_id" placeholder="请选择" @change="changeModel()">
-        <el-option label="全部" value></el-option>
-        <el-option v-for="item in projectOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
+        <el-option label="全部" value=""></el-option>
+        <el-option v-for="item in projectOptions" :key="item.project_id" :label="item.project_name" :value="item.project_id"></el-option>
       </el-select>
     </div>
 
@@ -78,7 +78,7 @@
     <el-row :gutter="32">
       <el-col :xs="24" :sm="24" :lg="24">
         <div class="chart-wrapper">
-            <bar-chart :title="'人次'" :options="modesData" />
+            <pie-chart title="完成情况" :options="CompletionOptions"/>
         </div>
       </el-col>
     </el-row>
@@ -88,13 +88,25 @@
     <el-table
       ref="multipleTable"
       :data="tableData"
+      :span-method="mergeSpan"
       border
       fit
       highlight-current-row
       style="width: 100%;margin-top: 10px;"
     >
-      <el-table-column label="日期" min-width="80" property="date" align="center"></el-table-column>
-      <el-table-column label="总数" min-width="80" property="total" align="center"></el-table-column>
+      
+      <el-table-column label="透析号" min-width="80" property="patient_id" align="center">
+        <template slot-scope="scope"><span>{{getPatientDialysisNo(scope.row.patient_id)}}</span></template>
+      </el-table-column>
+      <el-table-column label="姓名" min-width="80" property="patient_id" align="center">
+        <template slot-scope="scope"><span>{{getPatientName(scope.row.patient_id)}}</span></template>
+      </el-table-column>
+      <el-table-column label="检查项目" min-width="80" property="project_id" align="center">
+        <template slot-scope="scope"><span>{{getProjectName(scope.row.project_id)}}</span></template>
+      </el-table-column>
+      <el-table-column label="检查日期" min-width="80" property="inspect_date" align="center">
+        <template slot-scope="scope"><span>{{getTime(scope.row.inspect_date, '{y}{m}{d}')}}</span></template>
+      </el-table-column>
     </el-table>
 
     <!-- <pagi-nation title="分页"></pagi-nation> -->
@@ -115,40 +127,43 @@
 
 
 <script>
-import { getdialysistotaldata } from "@/api/qcd";
-import BarChart from "./components/BarChart";
+import { GetProcessIndicatorsData  } from "@/api/qcd";
+import PieChart from './components/PieChart'
+import {uParseTime} from "@/utils/tools";
 export default {
-  name: "processIndicators",
+  name: "dialysisTotal",
   data() {
     return {
       total: 0,
-      modesData: {
-        xAxis:[],
-        series:[],
-      },
+      projectOptions:{},
+      patientMap:{},
+        CompletionOptions:{
+            legend:[],
+            series:[],
+        },
       listQuery: {
         start_time: "",
         end_time: "",
         page: 1,
         limit: 10,
         lapseto: 0,
-        dialysis_age: 0,
-        mode_id: ""
+        project_id:'',
+        dialysis_age:0,
       },
-      projectOptions: {},
       tableData: [],
-      dialysisAge: 0,
-      dialysisAgeOptions: [
-        { value: 0, label: "全部" },
-        { value: 1, label: "大于三个月" },
-        { value: 2, label: "小于三个月" }
-      ],
+      tableRowData:[],
       lapsetoType: 0,
       lapsetoState: [
         { value: 0, label: "全部", source: 0, lapseto: 0 },
         { value: 1, label: "转出", source: 0, lapseto: 2 },
         { value: 2, label: "留治", source: 0, lapseto: 1 }
       ],
+      dialysisAge: 0,
+      dialysisAgeOptions: [
+        { value: 0, label: "全部" },
+        { value: 1, label: "大于三个月" },
+        { value: 2, label: "小于三个月" }
+      ],
       pickerOptions: {
         shortcuts: [
           {
@@ -209,28 +224,91 @@ export default {
   },
   methods: {
     getList() {
-      getdialysistotaldata(this.listQuery).then(response => {
+      GetProcessIndicatorsData(this.listQuery).then(response => {
         if (response.data.state == 0) {
           this.$message.error(response.data.msg);
           return false;
         } else {
+          this.tableData = [];
+          this.tableRowData = [];
+          this.total = response.data.data.total;
+          var unfinishedcount = response.data.data.unfinishedcount;
+          var finishedcount = this.total - unfinishedcount;
+          this.CompletionOptions = {
+            legend:[],
+            series:[],
+          };
+          this.CompletionOptions.legend.push('定时完成人次');
+          this.CompletionOptions.series.push({
+                value:finishedcount,name:'定时完成人次'
+            });
+          this.CompletionOptions.legend.push('未时完成人次');
+          this.CompletionOptions.series.push({
+                value:unfinishedcount,name:'未时完成人次'
+            });
+
           
+        
+          var references = response.data.data.references;
+          for (const index in references) {
+            if (references[index].project_id in this.projectOptions) {
+              continue;  
+            }
+            this.$set(this.projectOptions, references[index].project_id, references[index]);
+          }
+
+          var patients = response.data.data.patients;
+          for (const index in patients) {
+            if (patients[index].id in this.patientMap) {
+              continue;  
+            }
+            this.$set(this.patientMap, patients[index].id, patients[index]);
+          }
+          var temInspections = {};
+          var inspections = response.data.data.inspections;
+          for (const index in inspections) {
+            var key = inspections[index].inspect_date + '_' + inspections[index].patient_id;
+            if (!(key in temInspections)) {
+              temInspections[key] = {};
+            }
+            if (inspections[index].project_id in temInspections[key]) {
+              continue;
+            }
+            temInspections[key][inspections[index].project_id] = inspections[index];
+          }
+          var rowIndex = 0;
+          var childIndex = 0;
+          for (const key in temInspections) {
+            this.tableRowData.push(1);
+            var parentIndex = rowIndex;
+            childIndex = 0;
+            for (const child in temInspections[key]) {
+              this.tableData.push(temInspections[key][child]);
+              if(childIndex>0) {
+                this.tableRowData[parentIndex] += 1;
+                this.tableRowData.push(0);
+              }
+              childIndex++;
+              rowIndex++;
+            }
+          }
+
         }
       });
     },
     changeTime() {
       this.getList();
     },
-    selectdialysisAges(type) {
-      this.dialysisAge = type;
-      this.listQuery.dialysis_age = type;
-      this.getList();
-    },
     selectLapseTo(lapseto) {
       this.lapsetoType = lapseto;
       this.listQuery.lapseto = lapseto;
       this.getList();
     },
+    selectdialysisAges(type) {
+      this.dialysisAge = type;
+      this.listQuery.dialysis_age = type;
+      this.getList();
+    },
     changeModel() {
       this.getList();
     },
@@ -241,10 +319,35 @@ export default {
     handleCurrentChange(val) {
       this.listQuery.page = val;
       this.getList();
-    }
+    },
+    getTime(value, temp) {
+        if (value != undefined) {
+          return uParseTime(value, temp)
+        }
+        return ""
+    },
+    getProjectName(id) {
+      return (id in this.projectOptions) ? this.projectOptions[id].project_name:'';
+    },
+    getPatientName(id) {
+      return (id in this.patientMap) ? this.patientMap[id].name:'';
+    },
+    getPatientDialysisNo(id) {
+      return (id in this.patientMap) ? this.patientMap[id].dialysis_no:'';
+    },
+    mergeSpan({row, column, rowIndex, columnIndex}) {
+      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 3) {
+        const _row = this.tableRowData[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return {
+          rowspan: _row,
+          colspan: _col
+        }
+      }
+    },
   },
   components: {
-    BarChart
+      PieChart
   }
 };
 </script>