GY_ceshi_web/src/views/allcase/index.vue

<template>
  <div class="pages">
    <div class="block">
      <div class="blockCon">
        <div class="lefts">
          <el-dropdown>
            <el-button :class="formData.year.name ? 'color-btn' : ''">
              {{ formData.year.name || '按年' }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in yearList" :key="index" @click.native="funSeleterYear(item)">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-dropdown>
            <el-button :disabled="formData.year.name == ''" :class="formData.quarter.name ? 'color-btn' : ''">
              {{ formData.quarter.name || '按季' }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, index) in quarterList" :key="index" @click.native="funSeleterQuarter(item)">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="selects">
            <el-date-picker v-model="formData.startTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd" placeholder="开始日期"></el-date-picker>

            <el-date-picker
              v-model="formData.endTime"
              type="date"
              style="margin-left: 10px"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyyMMdd"
              placeholder="结束日期"
            ></el-date-picker>
          </div>
          <el-button class="btn1" type="primary" @click="funQuery">查询</el-button>
        </div>
      </div>
    </div>
    <div class="cardBox">
      <Title :title="'运行病历数量'" />
      <div class="contentBox">
        <div class="left">
          <div class="l">
            <div class="i" @click="goto('/caseNumber')">
              <div class="ba">病案数量</div>
              <div class="num cpoin">{{ countsData.case_total }}</div>
            </div>
            <div class="i" @click="goto('/defectNumber')" style="background: #38a1f1">
              <div class="ba">缺陷病案</div>
              <div class="num">{{ countsData.defect_case_total }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <!-- 科室排名 -->
    <div class="chart">
      <Title :title="'科室排名'" />
      <div id="myChart1" style="width: 100%; height: 600px"></div>
    </div>

    <!-- 缺陷问题 -->
    <div class="chart">
      <Title :title="'缺陷问题'" />
      <el-form :inline="true" :model="caseSearchData" class="demo-form-inline">
        <el-form-item label="">
          <el-select v-model="caseSearchData.department" filterable clearable placeholder="科室">
            <el-option v-for="(item, index) in departmentList" :label="item.name" :value="item.name" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getCaseList">查询</el-button>
        </el-form-item>
      </el-form>
      <ProblemTableBoxVue :data="caseList" />
    </div>
    <!-- 医师排名 -->
    <div class="chart">
      <div class="title-box">
        <Title :title="'医师排名'" />
        <div class="xz-btn" @click="handleExport">下载</div>
      </div>
      <div class="medicalRecord-box">
        <div class="medicalRecord-list-box">
          <MedicalRecordTableBoxVue :data="medicalRecordList" />
          <!-- 分页控制 -->
          <mPagination v-if="medicalRecordList && medicalRecordList.length !== 0" :data="paginationData" @pageChangeEvent="pageHasChanged"></mPagination>
        </div>
        <div id="myChart2" style="width: 100%; height: 400px"></div>
      </div>
    </div>

  </div>
</template>
  
  <script>
import * as echarts from 'echarts';
import { mapGetters } from 'vuex';
import Title from '@/components/Title';
import ProblemTableBoxVue from './components/ProblemTableBox.vue';
import MedicalRecordTableBoxVue from './components/MedicalRecordTableBox.vue';
import mPagination from '@/components/m-pagination';
import { medicalRecordDoctorExport } from '@/api/excel'

export default {
  components: {
    Title,
    ProblemTableBoxVue,
    MedicalRecordTableBoxVue,
    mPagination
  },
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name']),
  },
  data() {
    return {
      formData: {
        rangeDate: [],
        chooseDate: '',
        startTime: '',
        endTime: '',
        year: {
          name: '',
        },
        month: {
          name: '',
        },
        quarter: {
          name: '',
        },
        problem: 'all',
        defectFelg: 'all',
        type: '1',
      },
      homeData: {},
      quarterList: [],
      monthList: [],
      yearList: [],
      countsData: {
        case_total: 0,
        defect_case_total: 0,
      },
      caseSearchData: {
        department: ''
      },
      caseList: [],
      departmentList: [],
      doctorList:[], // 医生列表
      medicalRecordList: [], // 医师排名
      // 分页数据
      paginationData: {
        total: 10,
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  mounted() {
    this.storageSet('start_time', '');
    this.storageSet('end_time', '');
    this.formData.chooseDate = '30';
    this.chooseTime(this.formData.chooseDate);
    if (this.storageGet('homeFrom')) {
      this.formData = this.storageGet('homeFrom');
      this.storageRemove('homeFrom');
    }
    this.getDepartmentList()
    this.funQuery();
    this.selectInfo();
  },
  beforeRouteEnter(to, from, next) {
    
    next(vm => {
      // 回到原来的位置
      const position = JSON.parse(window.sessionStorage.getItem('position'))
      document.querySelector('.app-wrapper').scrollTop = position
    })
  },
  beforeRouteLeave(to, from, next) {
    // 保存离开页面时的位置
    const position = document.querySelector('.app-wrapper').scrollTop
    window.sessionStorage.setItem('position', JSON.stringify(position))
    next()
  },
  methods: {
    // 获取医生列表
    getDoctorList(){
      this.$axios2.post('/case-quality/doctor_list').then(res => {
        this.doctorList = res.data;
      });
    },
    // 缺陷病例统计
    getAnalysis(){
      this.$axios2.post('/case-quality/analysis').then(res => {

      });
    },
    
    // 甲乙病级病例
    getMedicalRecordLevel(){
      this.$axios2.post('/case-quality/medical_record_level').then(res => {

      });
    },
    // 获取部门集合
    getDepartmentList() {
      this.$axios.post('/get_omr_department_list').then(res => {
        this.departmentList = res.data;
      });
    },
    // 获取缺陷问题
    getCaseList() {
      let pramse = {
        start_time: this.formData.startTime,
        end_time: this.formData.endTime,
        department: this.caseSearchData.department
      };
      this.$axios.post('/case-quality/defect_issues', pramse).then(res => {
        this.caseList = res.data.list
      });
    },
    // 获取医师排名
    getMedicalRecordList() {
      let pramse = {
        start_time: this.formData.startTime,
        end_time: this.formData.endTime,
        page_size: this.paginationData.pageSize,
        page: this.paginationData.currentPage,
      };
      this.$axios2.post('/case-quality/medical_record_doctor', pramse).then(res => {
        let medicalRecordList = res.data.list;
        this.medicalRecordList = medicalRecordList;
         // 销毁上一次实例
         echarts.init(document.getElementById('myChart2')).dispose();
        // 构建新实例
        let myChart = echarts.init(document.getElementById('myChart2'));
        window.addEventListener('resize', function () {
          myChart.resize();
        });

        let data1 = [];
        let data2 = [];
        let data3 = [];
        medicalRecordList.forEach(ele => {
          data1.push(ele.key);
          data2.push(ele.defect_doc_count);
          data3.push(ele.doc_count);
        });
        myChart.setOption({
          // toolbox: {
          //   feature: {
          //     saveAsImage: {
          //       name: '医师排名',
          //     },
          //   },
          // },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          color:['#54C5A0FF','#5B8EC3FF'],
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: data1
          },
          series: [
            {
              name: '缺陷病例数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series'
              },
              data: data2
            },
            {
              name: '总病例数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data3
            }
          ]
        });
      });
    },
    pageHasChanged() {
      this.getMedicalRecordList();
    },
    getCounts() {
      let pramse = {
        start_time: this.formData.startTime,
        end_time: this.formData.endTime,
      };
      this.$axios.post('/case-quality/analysis', pramse).then(res => {
        this.countsData = res.data;
      });
    },
    funSeleterYear(val) {
      this.formData.year = val;
      this.formData.type = '1';
      this.formData.endTime = this.goTimeTwe(val.end);
      this.formData.startTime = this.goTimeTwe(val.start);
    },
    funSeleterMonth(val) {
      this.formData.month = val;
      this.formData.type = '3';
      this.formData.year = {
        name: '',
      };
      this.formData.quarter = {
        name: '',
      };
      this.formData.endTime = this.goTimeTwe(val.end);
      this.formData.startTime = this.goTimeTwe(val.start);
    },
    funSeleterQuarter(val) {
      this.formData.type = '2';
      this.formData.quarter = val;
      this.formData.endTime = this.formData.year.name + this.zh(val.end);
      this.formData.startTime = this.formData.year.name + this.zh(val.start);
    },
    zh(str) {
      let arr = str.split('-');
      return arr.join('');
    },
    selectInfo() {
      // let pramse = {};
      this.$axios.post('/selectInfo').then(res => {
        //问题属性 level
        this.quarterList = res.data.quarter;
        // 季度
        this.monthList = res.data.month;
        //月
        this.yearList = res.data.year;
      });
    },
    // 选择时间段
    chooseTime(time) {
      this.formData.rangeDate = this.timesCalculation(time).slice(0, 2);
    },

    // 医师排名导出
    handleExport() {
      const params = {
        start_time: this.formData.startTime,
        end_time: this.formData.endTime,
        page_size: this.paginationData.pageSize,
        page: this.paginationData.currentPage,
        is_export: 1
      }
     
      medicalRecordDoctorExport(params).then(res => {
        const content = res.data // 后台返回二进制数据
        const blob = new Blob([content])
        const fileName = `医师排名.csv`
        if ('download' in document.createElement('a')) { // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    funQuery() {
      //查询
      let type_id = '';
      if (this.formData.type == '1') {
        type_id = this.formData.year.id || '';
      } else if (this.formData.type == '2') {
        type_id = this.formData.quarter.id;
      } else {
        type_id = this.formData.month.id;
      }
      let pramse = {
        start_time: this.formData.startTime,
        end_time: this.formData.endTime,
      };
      this.storageSet('start_time', this.formData.startTime);
      this.storageSet('end_time', this.formData.endTime);
      this.storageSet('homeFrom', this.formData);
      this.initCharts1(pramse);
      this.getCounts();
      this.getCaseList();
      // 获取医师排名
      this.getMedicalRecordList();
      // 缺陷病例统计
      this.getAnalysis();
      // 甲乙病级病例
      this.getMedicalRecordLevel();
    },
    initCharts1(pramse) {
      this.$axios.post('/case-quality/ranking_department', pramse).then(res => {
        let dataName = [];
        let dataFleg = [];
        const total_error_medical = [];
        let dataNum = [];
        for (let item in res.data.list.slice(0, 10)) {
          dataName.push(res.data.list[item].name);
          dataFleg.push(res.data.list[item].total_medical);
          dataNum.push(res.data.list[item].item);
          total_error_medical.push(res.data.list[item].total_error_medical);
        }
        // 销毁上一次实例
        echarts.init(document.getElementById('myChart1')).dispose();
        // 构建新实例
        let myChart = echarts.init(document.getElementById('myChart1'));
        window.addEventListener('resize', function () {
          myChart.resize();
        });
        if (res.data.list.length) {
          myChart.setOption({
            toolbox: {
              feature: {
                saveAsImage: {
                  name: '科室排名',
                },
              },
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999',
                },
              },
            },
            legend: {
              show: true,
            },
            xAxis: {
              type: 'category',
              data: dataName,
              axisLabel: {
                rotate: 15,
              },
            },
            grid: {
              left: '3%',
              right: '3%',
              bottom: '3%',
              containLabel: true,
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                data: dataFleg,
                type: 'bar',
                showBackground: true,
                barMaxWidth: 30,
                label: {
                  show: true,
                  position: 'top',
                },
                name: '病案数',
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)',
                },
              },
              {
                data: total_error_medical,
                type: 'bar',
                showBackground: true,
                barMaxWidth: 30,
                label: {
                  show: true,
                  position: 'top',
                },
                name: '缺陷病案数',
                backgroundStyle: {
                  color: 'rgba(180, 180, 180, 0.2)',
                },
              },
            ],
          });
        } else {
          myChart.setOption({
            title: {
              text: '暂无数据',
              x: 'center',
              y: 'center',
              textStyle: {
                fontSize: 14,
                fontWeight: 'normal',
              },
            },
          });
        }
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.pages {
  padding: 0 18px;
  background: #f4f4f4;
  .btnNAv {
    display: flex;
    justify-content: flex-end;
    padding-top: 30px;
    padding-bottom: 10px;
    a {
      padding: 15px 30px;
      color: #fff;
      border-radius: 10px;
      margin-left: 15px;
    }
    .bj {
      background: #35ae4a;
    }
    .bc {
      background: #dd7500;
    }
    .dc {
      background: #439ab6;
    }
    .fh {
      background: #185da6;
    }
  }
  .block {
    margin-bottom: 20px;
    background: #fff;
    padding: 25px 15px;
    border-radius: 5px;
    .blockCon {
      display: flex;
      justify-content: space-between;
      .lefts {
        display: flex;
      }
      .selects {
        margin: 0 20px;
        span {
          margin-right: 10px;
        }
      }
    }
    .ytext {
      font-size: 16px;
      color: #e48d53;
      font-weight: 400;
      line-height: 40px;
    }
  }
  .cardBox {
    margin: 0 0 16px 0;
    background: #fff;
    padding: 25px 15px;
    border-radius: 5px;
    .contentBox {
      display: flex;
      .left {
        display: flex;
        flex: 1;
        .l {
          display: flex;
          flex: 1;
          flex-wrap: wrap;
          .i {
            width: calc(50% - 20px);
            margin-right: 20px;
            height: 86px;
            background: #30b48e;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            .ba {
              flex: 1;
              font-size: 16px;
              font-weight: 400;
              color: #fff;
            }
            .num {
              font-size: 24px;
              font-weight: bold;
              color: #fff;
              flex: 1;
              margin-left: 20px;
            }
            .icon {
              width: 50px;
              position: absolute;
              top: 18px;
              right: 25px;
            }
          }
        }
        .r {
          margin: 0 9% 0 0;
          .i {
            width: 195px;
            height: 56px;
            background: #eaf4ff;
            border-radius: 4px;
            margin: 0 0 9px 0;
            display: flex;
            align-items: center;
            justify-content: center;

            .icon {
              width: 22px;
              margin: 6px 0 0 27px;
            }
            .t {
              font-size: 18px;
              font-weight: 400;
              color: #333333;
              text-align: left;
              margin-left: 10px;
            }
            .rt {
              margin-left: 10px;
              font-weight: bold;
              color: #38a1f2;
              font-size: 18px;
              text-align: left;
            }
          }

          .i:nth-child(1) {
            background: #93d2f3;
          }

          .i:nth-child(2) {
            background: #f4ce98;
          }

          .i:nth-child(3) {
            background: #de868f;
          }
        }
      }
      .right {
        width: 521px;
      }
    }
  }
  .cpoin {
    cursor: pointer;
  }
  .chart {
    margin-bottom: 16px;
    background-color: #fff;
    padding: 25px 15px;
  }
}
.color-btn {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}
.title-box{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .xz-btn{
    width: 84px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #185DA6;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
}
.medicalRecord-box{
  width: 100%;
  display: flex;
  margin-top: 16px;
  &>div{
    flex: 1;
  }
  .medicalRecord-list-box{
    flex: 1;
  }
}
</style>