elizebeth/src/xt_pages/Dialysisanalysis/albumin/albuminall.vue

<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 { GetQCStatistisData,GetAllQCStatistisData } from '../../../api/qcd'

const moment = require('moment')

export default {
  props: {

    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: '自定义' }

      ],
      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: [],
      reference:{},
      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]))
  },
    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: 2,
        item_id: 35,
        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: 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,
          }
          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: {
                  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
      }
    },
    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
      }
    },

    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) {
      console.log(row)
      if(row.name == "不达标值患者"){
        this.statistics_type = 1
      }else if(row.name == "达标值患者"){
        this.statistics_type = 3
      }else {
        this.statistics_type = 2
      }
      this.getDataTwo()
      // console.log(id)
    }
  }

}
</script>
<style lang="scss" scoped>
.content_top {
  display: flex;
  justify-content: space-around;
  color: #1e5feb;
}
</style>