提交代码

src/xt_pages/Dialysisanalysis/otherIndicators/otherIndicators.vue

@@ -0,0 +1,105 @@
+<!-- 甲状旁腺激素分析 -->
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs="crumbs"></bread-crumb>
+    </div>
+    <div class="app-container">
+      <div class="page_patientControlAnalysis">
+        <el-tabs v-model="activeName" @tab-click="handleClick" >
+          <el-tab-pane label="统计全部" name="first">
+            <keep-alive>
+              <otherIndicatorsall :project_id="project_id" :item_id="item_id" v-if="activeName == 'first'"></otherIndicatorsall>
+            </keep-alive>
+          </el-tab-pane>
+
+          <el-tab-pane label="统计个人" name="second">
+            <keep-alive>
+              <otherIndicatorsone  :project_id="project_id" :item_id="item_id"  v-if="activeName == 'second'"></otherIndicatorsone>
+            </keep-alive>
+          </el-tab-pane>
+
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import echarts from 'echarts'
+import BreadCrumb from '@/xt_pages/components/bread-crumb'
+import otherIndicatorsall from './otherIndicatorsall.vue'
+import otherIndicatorsone from './otherIndicatorsone.vue'
+export default {
+  name:'otherIndicators',
+  components: {
+    BreadCrumb,
+    otherIndicatorsall,
+    otherIndicatorsone
+  },
+  data() {
+    return {
+      activeName: 'first',
+      project_id:this.$route.query.project_id,
+      item_id:this.$route.query.item_id,
+
+    }
+  },
+  methods:{
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// .page_patientControlAnalysis {
+
+// .pointTitle {
+   //   font-size: 13px;
+   // }
+
+// .chartTitle {
+   //   font-size: 16px;
+   //   font-weight: bold;
+   //   color: #000000;
+   // }
+
+// .point {
+   //   width: 13px;
+   //   height: 13px;
+   //   background: linear-gradient(
+   //       0deg,
+   //       rgba(169, 224, 243, 1),
+   //       rgba(159, 189, 252, 1)
+   //   );
+   //   border-radius: 7px;
+   //   margin-right: 8px;
+   // }
+
+// .pointTitle {
+   //   font-size: 13px;
+   // }
+
+// }
+
+</style>
+
+<style lang="scss">
+// .page_patientControlAnalysis {
+
+// .el-form-item {
+   //   margin-bottom: 0;
+   // }
+
+// .cell {
+   //   text-align: center;
+   // }
+
+// ::-webkit-scrollbar {
+   //   height: 15px !important;
+   // }
+
+// }
+</style>

src/xt_pages/Dialysisanalysis/otherIndicators/otherIndicatorsall.vue

@@ -0,0 +1,697 @@
+<template>
+  <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
+            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">
+        <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
+        :header-cell-style="{
+          backgroundColor: 'rgb(245, 247, 250)',
+          color: '#606266'
+        }"
+        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
+      width="1000px" class="registerDialog" :visible.sync="detailVisibility"
+      :close-on-click-modal="isClose"
+      :close-on-press-escape="isClose"
+    >
+      <el-row :gutter="25">
+        <el-col :span="5">
+          <div class="block">
+            <span>查询时间:</span>
+            <el-select size="small" v-model="time_type_two" placeholder="请选择"
+                       style="width:100px;margin-left:5px;" @change="changeItemTwo">
+              <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="10">
+          <div>
+            <el-date-picker
+              style="width: 120px"
+              v-model="start_time_one"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              type="date"
+
+              placeholder="选择日期">
+            </el-date-picker>
+            <span>-</span>
+            <el-date-picker
+              style="width: 120px"
+              v-model="end_time_one"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>
+          </div>
+        </el-col>
+
+        <el-col :span="4">
+          <div>
+
+            <el-select size="small" v-model="statistics_type" placeholder="请选择"
+                       style="width:100px;margin-left:5px;">
+              <el-option
+                v-for="item,index in statistics_types"
+                :key="index"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+
+          </div>
+        </el-col>
+
+        <!--        <el-col :span="4">-->
+        <!--          <div>-->
+        <!--            <el-select size="small" v-model="sort_type" placeholder="请选择"-->
+        <!--                       style="width:100px;margin-left:5px;">-->
+        <!--              <el-option-->
+        <!--                v-for="item,index in sort_types"-->
+        <!--                :key="index"-->
+        <!--                :label="item.label"-->
+        <!--                :value="item.value">-->
+        <!--              </el-option>-->
+        <!--            </el-select>-->
+        <!--          </div>-->
+        <!--        </el-col>-->
+
+        <el-col :span="4">
+          <div >
+            <el-input v-model="keyword" placeholder="请输入患者姓名或透析号"></el-input>
+          </div>
+        </el-col>
+
+        <el-col :span="2">
+          <div>
+            <el-button @click="getDataTwo()">查询</el-button>
+          </div>
+        </el-col>
+
+        <el-col :span="2">
+          <div>
+            <el-button @click="exportAction()">导出</el-button>
+          </div>
+        </el-col>
+
+        <!--        <el-col :span="2">-->
+        <!--          <div>-->
+        <!--            <el-button @click="getDataTwo()">打印</el-button>-->
+        <!--          </div>-->
+        <!--        </el-col>-->
+
+
+
+
+
+      </el-row>
+
+      <el-table
+        :data="patientTableData"
+        border
+        ref="table"
+        max-height="500px"
+        style="width: 100%">
+        <el-table-column
+          prop="dialysis_no"
+          align="center"
+          label="透析号"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="name"
+          label="患者姓名"
+        >
+        </el-table-column>
+        <el-table-column
+          prop="date"
+          label="检查日期"
+        >
+        </el-table-column>
+
+        <el-table-column
+          prop="inspect_value"
+          label="结果"
+        >
+        </el-table-column>
+
+      </el-table>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="detailVisibility = false">取消</el-button>
+        <el-button type="primary" @click="detailVisibility = false">确定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import { GetAllQCStatistisData, GetQCStatistisData } from '../../../api/qcd'
+import { number } from 'echarts/lib/export'
+
+const moment = require('moment')
+
+export default {
+  props: {
+    project_id:{
+      type: number,
+    }, item_id:{
+      type: number,
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '400px'
+    }
+
+  },
+  data() {
+    return {
+      statistics_types:[
+        { value: 1, label: '不达标患者' },
+        { value: 2, label: '未检查患者' },
+        { value: 3, label: '达标患者' },
+      ],
+      sort_types:[
+        { value: 1, label: '时间' },
+        { value: 2, label: '患者' },
+      ],
+      detailVisibility:false,
+      isClose:true,
+      time_type: 1,
+      time_type_two: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'),
+      start_time_one: new Date(new Date().getFullYear(), new Date().getMonth(), 1).toLocaleDateString('en-CA'),
+      end_time_one: 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: [],
+      statistics_type:1,
+      sort_type:"",
+      keyword:"",
+      patientTableData:[],
+    }
+  },
+  mounted() {
+    this.getData()
+  },
+  methods: {
+    exportAction(){
+      let list = []
+      for (let i = 0; i < this.patientTableData.length; i++) {
+        let order = this.patientTableData[i]
+        let name = order.name
+        let value = order.inspect_value
+        let inspect_date = order.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
+        })
+      })
+    },
+
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => v[j]))
+    },
+    changeItemTwo(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_one = startOfMonth
+          this.end_time_one = endOfMonth
+          // this.getDataTwo()
+          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_one = startOfLastMonth
+          this.end_time_one = endOfLastMonth
+          // this.getDataTwo()
+          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_one = startOfYear
+          this.end_time_one = endOfYear
+          // this.getDataTwo()
+
+          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_one = startOfLastYear
+          this.end_time_one = endOfLastYear
+          // this.getDataTwo()
+
+          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_one = startOfFirstQuarter
+          this.end_time_one = endOfFirstQuarter
+          // this.getDataTwo()
+          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_one = startOfSecondQuarter
+          this.end_time_one = endOfSecondQuarter
+          // this.getDataTwo()
+          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_one = startOfThirdQuarter
+          this.end_time_one = endOfThirdQuarter
+          // this.getDataTwo()
+
+          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_one = startOfFourthQuarter
+          this.end_time_one = endOfFourthQuarter
+          // this.getDataTwo()
+          break
+        case 9:
+          this.start_time_one = ''
+          this.end_time_one = ''
+          break
+      }
+    },
+
+    getDataTwo() {
+      if(this.start_time_one.length == 0){
+        this.$message.error("请选择开始时间")
+      }
+      if(this.end_time_one.length == 0){
+        this.$message.error("请选择结束时间")
+      }
+      let params = {
+        start_date: this.start_time_one,
+        end_date: this.end_time_one,
+        project_id: this.project_id,
+        item_id: this.item_id,
+        item_type:this.statistics_type,
+        order_type:this.sort_type,
+        keyword: this.keyword,
+      }
+      this.patientTableData = []
+      GetAllQCStatistisData(params).then(response => {
+        if (response.data.state == 1) {
+          this.detailVisibility = true
+          this.patientTableData  =  this.patientTableData.concat(response.data.data.list)
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      })
+
+    },
+    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: this.project_id,
+        item_id: this.item_id
+      }
+      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 ,
+            name: '不达标值患者',
+            count:response.data.data.unusual_total,
+          }
+          this.pieData.push(objone)
+          this.tableData.push(objone)
+
+          let objtwo = {
+            value:   response.data.data.normal_total ,
+            name: '达标值患者',
+            count:response.data.data.normal_total,
+
+          }
+          this.pieData.push(objtwo)
+          this.tableData.push(objtwo)
+
+          let objthree = {
+            value: 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: ['#F74587', '#32D79B', '#6590FF'],
+
+
+            title: {
+              // 设置饼图标题，位置设为顶部居中
+              //   text: "国内院士前五省份图示",
+              top: '0%',
+              left: 'center'
+            },
+            series: [
+              {
+                type: 'pie',
+                label: {
+                  normal : {
+                    formatter: '{b}:{c}: ({d}%)',
+                    textStyle : {
+                        fontWeight : 'normal',
+                        fontSize : 15,
+                        color : "black"
+                    }
+                  }
+                  // b代表名称，c代表对应值，d代表百分比"{b} : {d}% ({c})"
+                },
+                radius: '65%', //饼图半径
+                data: this.pieData,
+                itemStyle : {
+                  emphasis: {
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowColor: 'rgba(0, 0, 0, 0.5)'
+                  }
+                }
+              }
+            ]
+          }
+          //   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)
+        }
+      })
+
+    },
+    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
+    },
+    handleClick(row) {
+      if(row.name == "不达标值患者"){
+        this.statistics_type = 1
+      }else if(row.name == "达标值患者"){
+        this.statistics_type = 3
+      }else {
+        this.statistics_type = 2
+      }
+      this.getDataTwo()
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.content_top {
+  display: flex;
+  justify-content: space-around;
+  color: #1e5feb;
+}
+</style>