elizebeth/src/xt_pages/qcd/workAnalysis/doctor.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div class="page_workAnalysis">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="医生" name="first"></el-tab-pane>
          <el-tab-pane label="护士" name="second"></el-tab-pane>
        </el-tabs>
        <div class="cell clearfix">
          <el-select v-model="query.admin_user_id" placeholder="请选择" style="width:120px;margin-right:20px"               @change="changeDoctor"
          >
            <el-option
              v-for="item in doctor_options"
              :key="item.id"
              :label="item.user_name"
              :value="item.admin_user_id"
            ></el-option>
          </el-select>
          <el-select
            v-model="query.statistics_type"
            placeholder="请选择"
            @change="changeProject"
            style="width:120px;margin-right:20px"
          >
            <el-option
              v-for="item in project_options"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
          <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"
            :picker-options="pickerOptions"
            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"
            :picker-options="pickerOptions"
            style="width: 150px;"
            type="date"
            placeholder="选择日期时间"
            align="right"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div class="tableTitle">统计图</div>
        <div>
          <line-chart :options="bar"></line-chart>
        </div>
        <div class="tableTitle">统计表</div>
        <div>
          <el-table :data="tableData" style="width: 100%" :height="tableHeight">
            <el-table-column fixed label="姓名" align="center">
              <template slot-scope="scope">
                {{scope.row.user_name}}

              </template>
            </el-table-column>

            <el-table-column label="治疗人次" align="center">
              <template slot-scope="scope">
                {{scope.row.p_count?scope.row.p_count:''}}

              </template>
            </el-table-column>

            <el-table-column label="病程记录" align="center">
              <template slot-scope="scope">
                {{scope.row.course_count?scope.row.course_count:''}}

                <!--{{// scope.row.patient.lapseto == 1 ? '留治':'转出'}}-->
              </template>
            </el-table-column>

            <el-table-column label="抢救记录" align="center">
              <template slot-scope="scope">
                {{scope.row.rescue_count?scope.row.rescue_count:''}}

                <!--{{scope.row.last_after_weight?scope.row.last_after_weight:''}}-->

                <!--<div v-if="scope.row.before.systolic_blood_pressure">{{scope.row.before.systolic_blood_pressure}} / {{scope.row.before.diastolic_blood_pressure}}</div>-->
              </template>
            </el-table-column>

            <el-table-column label="合计" align="center">
              <template slot-scope="scope">
                {{scope.row.p_count + scope.row.course_count + scope.row.rescue_count?scope.row.p_count + scope.row.course_count + scope.row.rescue_count:''}}

                <!--<div v-if="scope.row.min_monitor.systolic_blood_pressure">{{ scope.row.min_monitor.systolic_blood_pressure}} /{{ scope.row.min_monitor.diastolic_blood_pressure}}</div>-->
              </template>
            </el-table-column>

          </el-table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import LineChart from "../../qcd/components/LineChart";

import {GetDoctorWorkloadChartData,GetDoctorWorkloadTableData,GetAllAdminUser} from "@/api/common/statistics";

export default {
  components: {
    BreadCrumb,
    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;;
        }
      },
      tableData: [
      ],
      loading: false,
      total: '',
      query: {
        admin_user_id: "",
        statistics_type: 1,
        start_time: "",
        end_time: "",
        limit:20,
        page:1,
      },


      doctor_options:[],
      project_options:[
        {value:1, name:"治疗"},
        {value:2, name:"病程记录"},
        {value:3, name:"抢救记录"}
      ],
      crumbs: [
        { path: false, name: "质控管理" },
        { path: false, name: "工作量分析统计" },
        { path: false, name: "医生" }
      ],
      activeName: "first",
      listQuery: {
        start_time: "",
        end_time: "",
        page: 1,
        limit: 10
      },

      value: "请选项",
      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: "{c}"
              }
            },
            //配置样式
            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: {
    changeDoctor(val){
      this.query.admin_user_id = val
      this.query.page = 1
      this.GetDoctorWorkloadTableData(this.query)

    },
    GetAllDoctor(){
      GetAllAdminUser().then(response => {
        if (response.data.state == 1) {
          var adminUser = response.data.data.admin
          this.admin_user  = adminUser
          for (let i = 0; i < adminUser.length; i++){
            if(adminUser[i].user_type == 2){
              this.doctor_options.push(adminUser[i])
            }
          }
        } else {
          this.$message.error('请求数据失败')
          return false
        }
      })

    },
    changeProject(val){
      this.query.statistics_type = val
      this.query.page = 1
      this.GetDoctorWorkloadChartData(this.query)
      // this.GetDialysisProcessIndexTableData(this.query)

    },
    handleSizeChange(limit) {
      this.query.limit = limit;
      this.GetDoctorWorkloadTableData(this.query)
    },
    handleCurrentChange(page) {
      this.query.page = page;
      this.GetDoctorWorkloadTableData(this.query)
    },GetDoctorWorkloadTableData(params) {
      this.loading = true
      this.tableData = []
      GetDoctorWorkloadTableData(params)
        .then(rs => {
          var resp = rs.data
          if (resp.state == 1) {
            this.loading = false
            for (let i = 0; i < resp.data.data.length; i++) {
              this.tableData.push(resp.data.data[i])
            }
          } else {
            this.loading = false
          }
        })
        .catch(error => {

        })
    },
    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.GetDoctorWorkloadChartData(this.query)
        this.GetDoctorWorkloadTableData(this.query)

      }

    },  GetDoctorWorkloadChartData(params) {

      this.bar.xAxis.data = []
      this.bar.series[0].data = []
      GetDoctorWorkloadChartData(params)
        .then(rs => {
          var resp = rs.data
          if (resp.state == 1) {

            for (let i = 0;  i < resp.data.data.length;i++){
              this.bar.xAxis.data.push(resp.data.data[i].user_name)
              if(this.query.statistics_type == 1){

                this.bar.series[0].data.push(resp.data.data[i].p_count)

              }else if(this.query.statistics_type == 2){
                this.bar.series[0].data.push(resp.data.data[i].course_count)

              }else if(this.query.statistics_type == 3){
                this.bar.series[0].data.push(resp.data.data[i].rescue_count)

              }
            }
          } else {
          }
        })
        .catch(error => {
        })
    },
    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.GetDoctorWorkloadChartData(this.query)
        this.GetDoctorWorkloadTableData(this.query)

      }
    },
    handleClick() {
      if (this.activeName == "second") {
        this.$router.push({ path: "/qcd/workAnalysis/nurse" });
      }
    }
  },created(){
    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() < 0 ? '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.statistics_type = 1
    this.GetAllDoctor()
    this.GetDoctorWorkloadChartData(this.query)
    this.GetDoctorWorkloadTableData(this.query)


  }
};
</script>

<style lang="scss" scoped>
.tableTitle {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
<style lang="scss">
.page_workAnalysis {
  .cell {
    text-align: center;
  }
}
</style>