终末质控-科室排名

src/api/excel.js

@@ -248,3 +248,13 @@ export function majorIndexDetailExport(data) {
     responseType: 'blob'
   })
 }
+
+//
+export function getDepartmentRankExport(data) {
+  return request_blob({
+    url: `api/CaseHistory/Terminal/getDepartmentRankExport`,
+    method: 'post',
+    responseType: 'blob',
+    data
+  })
+}

src/views/allcase/index.vue

@@ -1,50 +1,44 @@
 <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 class="bg-card" style="margin-bottom: 16px;">
+      <el-form :inline="true" :model="formData" style="flex-wrap: wrap">
+        <el-form-item label="病案编号">
+          <el-input style="width: 197.5px;" placeholder="请输入病案编号" v-model="formData.AAA28" clearable></el-input>
+        </el-form-item>
+        <el-form-item label="所属院区">
+          <el-select placeholder="请选择所属院区" v-model="formData.YQ_CODE" multiple collapse-tags clearable @change="yqChange">
+            <el-option v-for="(item,index) in searchOptions.yqArray" :key="index" :label="item.dep_name" :value="item.dep_id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="所属科室">
+          <el-cascader placeholder="请选择科室" v-model="formData.KS_CODE" :options="searchOptions.ksArray" :props="searchOptions.cascaderProps" clearable collapse-tags @change="ksChange">
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="所属病区">
+          <el-cascader placeholder="请选择病区" v-model="formData.BQ_CODE" :options="searchOptions.bqArray" :props="searchOptions.cascaderProps" clearable collapse-tags>
+          </el-cascader>
+        </el-form-item>
+        <el-form-item label="出院时间">
+          <el-select style="width: 130px;margin-right: 5px;" v-model="search.year" @change="yearChange">
+            <el-option v-for="(item,index) in yearArray" :key="index" :label="item.name" :value="item.value"></el-option>
+          </el-select>
+          <el-select style="width: 130px;margin-right: 10px;" v-model="search.quarter" @change="yearChange">
+            <el-option v-for="(item,index) in quarterArray" :key="index" :label="item.value" :value="item.id"></el-option>
+          </el-select>
+          <el-date-picker v-model="formData.startTime"   type="date" placeholder="出院开始日期" value-format="yyyyMMdd" format="yyyy年MM月dd日" />
+          <span style="padding: 0 10px;">至</span>
+          <el-date-picker v-model="formData.endTime"   type="date" placeholder="出院结束日期" value-format="yyyyMMdd" format="yyyy年MM月dd日" />
+        </el-form-item>
+        <el-form-item style="display: flex;justify-content: flex-end;">
+          <div>
+            <el-button class="btn1" type="primary" @click="funQuery">查询</el-button>
+            <el-button  @click="reset">重置</el-button>
           </div>
-          <el-button class="btn1" type="primary" @click="funQuery">查询</el-button>
-        </div>
-      </div>
+        </el-form-item>
+      </el-form>
     </div>
     <div class="cardBox">
-      <Title :title="'运行病历数量'"/>
+      <Title :title="'终末病历数量'"/>
       <div class="contentBox">
         <div class="left">
           <div class="l">
@@ -63,12 +57,47 @@
     </div>
     <!-- 科室排名 -->
     <div class="chart">
-      <Title :title="'科室排名'"/>
-      <div id="myChart1" style="width: 100%; height: 600px"></div>
+      <div style="display: flex;" >
+        <Title :title="rankName+'排名'"/>
+        <div style="display: flex;justify-content: center;margin-left: auto" @click="departmentRankStatus = !departmentRankStatus">
+          <el-icon style="line-height: 16px;" :class="departmentRankStatus === true ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></el-icon>
+          <div>{{departmentRankStatus === true ? '隐藏' : '显示'}}</div>
+        </div>
+      </div>
+      <div v-show="departmentRankStatus" style="display: flex;justify-content: center;margin-top: 20px;">
+          <div style="width: 60%;margin-right: 20px;">
+            <div style="display: flex;" class="mb20">
+              <div style="display: flex;align-items: center">
+                <div style="margin-right: 10px;">当前维度</div>
+                <el-select  v-model="departmentSearch.rank_type" @change="depRankChange">
+                  <el-option v-for="(v,k) in departmentOptions.rankTypeArray" :key="k" :label="v.name" :value="v.type_id"></el-option>
+                </el-select>
+              </div>
+              <div style="margin-left: auto;">
+                <el-button @click="rankOrder" :icon="departmentSearch.rank_order == 2 ? 'el-icon-bottom':'el-icon-top'">{{rankOrderName}}</el-button>
+                <el-button icon="el-icon-download" @click="departmentRankExport">下载</el-button>
+              </div>
+            </div>
+            <el-table :data="departmentOptions.tableList" :height="500">
+              <el-table-column v-for="(item,index) in rankTableFiled" :index="index" :prop="item.prop" :label="item.label" align="center" show-overflow-tooltip>
+              </el-table-column>
+            </el-table>
+            <el-pagination
+              background
+              @size-change="handleDepartmentSizeChange"
+              @current-change="handleDepartmentCurrentChange"
+              :current-page="departmentSearch.page"
+              :page-size="departmentSearch.size"
+              layout="total, prev, pager, next, jumper"
+              :total="departmentSearch.total">
+            </el-pagination>
+          </div>
+          <div id="myChart1" style="width: 40%; height: 600px;margin-top: 10px;"></div>
+      </div>
     </div>
 
     <!-- 缺陷问题 -->
-    <div class="bg-card" style="margin-bottom: 24px; padding">
+    <div class="bg-card" style="margin-bottom: 24px;">
       <!-- <Title :title="'缺陷问题'" /> -->
       <CardTitle title="缺陷问题">
         <el-image
@@ -100,7 +129,7 @@
     </div>
 
     <!-- 医师排名 -->
-    <div class="bg-card" style="margin-bottom: 24px; padding">
+    <div class="bg-card" style="margin-bottom: 24px;">
       <CardTitle title="医师排名">
         <el-image
           class="title_arrow"
@@ -116,10 +145,7 @@
         <div v-show="doctor_show">
           <el-row :gutter="20">
             <el-col :span="13">
-              <el-table
-                :data="doctor_tableData"
-                class="mb20"
-                style="width: 100%">
+              <el-table :data="doctor_tableData" class="mb20" style="width: 100%">
                 <el-table-column
                   type="index"
                   label="序号"
@@ -198,8 +224,9 @@ import {mapGetters} from 'vuex';
 import Title from '@/components/Title';
 import ProblemTableBoxVue from './components/ProblemTableBox.vue';
 import MedicalRecordTableBoxVue from './components/MedicalRecordTableBox.vue';
-import {medicalRecordDoctorExport} from '@/api/excel'
+import { getDepartmentRankExport, medicalRecordDoctorExport } from '@/api/excel';
 import DoctorRankVue from './components/DoctorRank.vue'
+import moment from 'moment/moment';
 
 export default {
   components: {
@@ -209,15 +236,72 @@ export default {
     DoctorRankVue
   },
   name: 'Dashboard',
-  computed: {
-    ...mapGetters(['name']),
-    processedData() {
-      // 在计算属性中进行数据处理，返回处理后的结果
-      return this.makeDoctorRank(this.doctor_rank);
-    }
-  },
   data() {
     return {
+      //region 顶部搜索
+      search:{year:0,quarter:0},
+      searchOptions:{
+        yqArray:[],//院区options
+        ksArray:[],//科室options
+        bqArray:[],//病区options
+        cascaderProps: {
+          multiple: true,      // 开启多选模式
+          label: 'dep_name',
+          value: 'dep_id',
+          children: 'children',
+          checkStrictly: true, // 允许独立选择任意层级
+          emitPath: false,     // 是否返回完整路径（true 返回路径数组，false 只返回末节点值）
+        },
+      },
+      yearArray:[
+        {'id':0,'value':0,'name':'按年份'},
+        {'id':1,'value':'2022','name':'2022'},
+        {'id':2,'value':'2023','name':'2023'},
+        {'id':3,'value':'2024','name':'2024'},
+        {'id':4,'value':'2025','name':'2025'},
+        ],
+      quarterArray:[
+        {'id':0,'value':'按季度'},
+        {'id':1,'value':'第一季度'},
+        {'id':2,'value':'第二季度'},
+        {'id':3,'value':'第三季度'},
+        {'id':4,'value':'第四季度'},
+      ],
+      //endregion
+      //region 科室排名
+      departmentSearch:{rank_type:2,rank_order:1,page:1,size:10,total:0},//科室排名search条件
+      departmentOptions:{
+        tableField:[//列表表头
+          {'prop':'rank','label':'排名',},
+          {'prop':'dep_name','label':'出院科室名称',},
+          {'prop':'bl_num','label':'质控病例',},
+          {'prop':'qx_num','label':'缺陷病例',},
+          {'prop':'qx_ratio','label':'缺陷占比',},
+        ],
+        tableList:[],//列表数据
+        rankTypeArray:[//排名类型
+          {'type_id':1,'name':'院区','filed':'出院院区名称'},
+          {'type_id':2,'name':'科室','filed':'出院科室名称'},
+          {'type_id':3,'name':'病区','filed':'出院病区名称'},
+        ],
+        rankOrderArray: [//排序
+          {'id':1,'name':'升序'},
+          {'id':2,'name':'降序'}
+        ],
+      },
+      departmentRankStatus:true, //是否显示，默认为显示
+      departmentMyChart:{//科室排名图表
+        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow'}},
+        legend: {},
+        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+        xAxis: { type: 'value', boundaryGap: [0, 0.01] },
+        yAxis: { type: 'category', data: [] },
+        series: [
+          { name: '质控病例', type: 'bar', data: [] },
+          { name: '缺陷病例', type: 'bar', data: [] , itemStyle: { color: 'red' }}
+        ]
+      },
+      //endregion
       doctor_rank:[],
       formData: {
         rangeDate: [],
@@ -264,8 +348,30 @@ export default {
       },
     };
   },
-  mounted() {
+  computed: {
+    ...mapGetters(['name']),
+    processedData() {
+      // 在计算属性中进行数据处理，返回处理后的结果
+      return this.makeDoctorRank(this.doctor_rank);
+    },
+    //科室排名排序
+    rankOrderName(){
+      return this.departmentOptions.rankOrderArray.find(item => item.id === this.departmentSearch.rank_order).name
+    },
+    //计算当前排名的所属维度
+    rankName(){
+      return this.departmentOptions.rankTypeArray.find(item => item.type_id === this.departmentSearch.rank_type).name
+    },
+    //
+    rankTableFiled(){
+      let filed = this.departmentOptions.rankTypeArray.find(item => item.type_id === this.departmentSearch.rank_type).filed
+      this.departmentOptions.tableField[1]['label'] = filed;
+      return this.departmentOptions.tableField;
+    }
 
+  },
+  mounted() {
+    this.getSearchOptions();
     this.doctor_rank = JSON.parse(JSON.stringify(this.doctor_tableData)).slice(0, 10)
     this.storageSet('start_time', '');
     this.storageSet('end_time', '');
@@ -278,9 +384,10 @@ export default {
     this.getDepartmentList()
     this.funQuery();
     this.selectInfo();
+    this.getAAC01Date();
+    this.getDepartmentTableList();
   },
   beforeRouteEnter(to, from, next) {
-
     next(vm => {
       // 回到原来的位置
       const position = JSON.parse(window.sessionStorage.getItem('position'))
@@ -294,6 +401,140 @@ export default {
     next()
   },
   methods: {
+    //重置头部搜索条件
+    reset(){
+      this.formData = {};
+      this.getAAC01Date();
+    },
+    //院区change事件
+    yqChange(){
+      this.formData.KS_CODE = [];
+      this.formData.BQ_CODE = [];
+      this.$axios.post('CaseHistory/Terminal/getKsOptions',{'YQ_CODE':this.formData.YQ_CODE}).then(res=>{
+        this.searchOptions.ksArray = res.data.ksArray;
+        this.searchOptions.bqArray = res.data.bqArray;
+      })
+    },
+    //科室change事件
+    ksChange(){
+      this.formData.BQ_CODE = [];
+      console.log(this.formData);
+      this.$axios.post('CaseHistory/Terminal/getBqOptions',{'KS_CODE':this.formData.KS_CODE}).then(res=>{
+        this.searchOptions.bqArray = res.data.bqArray;
+      })
+    },
+    //获取头部搜索options
+    getSearchOptions(){
+      this.$axios.post('CaseHistory/Terminal/getSearchOptions',{}).then(res=>{
+        this.searchOptions.yqArray = res.data.yqArray;//院区
+        this.searchOptions.ksArray = res.data.ksArray;//科室
+        this.searchOptions.bqArray = res.data.bqArray;//病区
+      })
+    },
+    //头部默认出院日期
+    getAAC01Date(){
+      this.formData.startTime = moment().format('YYYY0101');
+      this.formData.endTime = moment().format('YYYYMMDD');
+    },
+    //
+    yearChange(){
+      let year = this.search.year;
+      let quarter = this.search.quarter;
+      let startMonth = "01";
+      let endMonth = "1231";
+      switch (quarter){
+        case 1:
+          startMonth = "01";
+          endMonth = "0331";
+          break;
+        case 2:
+          startMonth = "04";
+          endMonth = "0630";
+           break;
+        case 3:
+          startMonth = "07";
+          endMonth = "0930";
+          break;
+        case 4:
+          startMonth = "10";
+          endMonth = "1231";
+          break;
+      }
+      if (year === 0){
+        this.formData.startTime = "";
+        this.formData.endTime = ""
+      }else {
+        this.formData.startTime = moment().format(year+startMonth+"01");
+        this.formData.endTime = moment().format(year+endMonth);
+      }
+    },
+    //region 科室排名===
+    //下载
+    departmentRankExport(){
+      let params = Object.assign({},this.departmentSearch,this.formData);
+      getDepartmentRankExport(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);
+        }
+      })
+    },
+    //排序
+    rankOrder(){
+      this.departmentSearch.rank_order = this.departmentSearch.rank_order === 1 ? 2 : 1;
+      this.getDepartmentTableList();
+    },
+    //科室排名当前维度change事件
+    depRankChange(){
+      this.getDepartmentTableList();
+    },
+    handleDepartmentSizeChange(value){
+      this.departmentSearch.page = 1;
+      this.departmentSearch.size = value;
+      this.getDepartmentTableList();
+    },
+    //跳页
+    handleDepartmentCurrentChange(value){
+      this.departmentSearch.page = value;
+      this.getDepartmentTableList();
+    },
+    //获取科室排名列表数据
+    getDepartmentTableList(){
+      let params = Object.assign({},this.departmentSearch,this.formData);
+      this.$axios.post('CaseHistory/Terminal/getDepartmentTableList',params).then(res=>{
+        this.departmentOptions.tableList = res.data.data;
+        this.departmentSearch.total = res.data.total;
+        this.departmentMyChart.yAxis.data = res.data.chartData.name;
+        this.departmentMyChart.series[0].data = res.data.chartData.bl_num;
+        this.departmentMyChart.series[1].data = res.data.chartData.qx_num;
+        this.getDepartmentMyChart();
+      })
+    },
+    //科室排名图表
+    getDepartmentMyChart(){
+      // 销毁上一次实例
+      echarts.init(document.getElementById('myChart1')).dispose();
+      // 构建新实例
+      let myChart = echarts.init(document.getElementById('myChart1'));
+      window.addEventListener('resize', function () {
+        myChart.resize();
+      });
+      myChart.setOption(this.departmentMyChart);
+    },
+    //endregion
 
     makeDoctorRank(data) {//处理图表数据
       let newData = JSON.parse(JSON.stringify(data)) || []
@@ -403,9 +644,6 @@ export default {
         this.doctor_rank = JSON.parse(JSON.stringify(res.data.list)).slice(0, 10)
       })
     },
-    // pageHasChanged() {
-    //   this.getMedicalRecordList();
-    // },
     getCounts() {
       let pramse = {
         start_time: this.formData.startTime,
@@ -504,7 +742,7 @@ export default {
       this.storageSet('start_time', this.formData.startTime);
       this.storageSet('end_time', this.formData.endTime);
       this.storageSet('homeFrom', this.formData);
-      this.initCharts1(pramse);
+     // this.initCharts1(pramse);
       this.getCounts();
       this.getCaseList();
       // 获取医师排名
@@ -513,6 +751,8 @@ export default {
       this.getAnalysis();
       // 甲乙病级病例
       this.getMedicalRecordLevel();
+      //科室维度排名
+      this.getDepartmentTableList();
     },
     initCharts1(pramse) {
       this.$axios.post('/case-quality/ranking_department', pramse).then(res => {
@@ -533,6 +773,42 @@ export default {
         window.addEventListener('resize', function () {
           myChart.resize();
         });
+        myChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
+          },
+          series: [
+            {
+              name: '质控病例',
+              type: 'bar',
+              data: [18203, 23489, 29034, 104970, 131744, 630230]
+            },
+            {
+              name: '缺陷病例',
+              type: 'bar',
+              data: [19325, 23438, 31000, 121594, 134141, 681807]
+            }
+          ]
+        })
+        /*
         if (res.data.list.length) {
           myChart.setOption({
             toolbox: {
@@ -614,6 +890,7 @@ export default {
             },
           });
         }
+        */
       });
     },
   },
@@ -803,7 +1080,7 @@ export default {
   .chart {
     margin-bottom: 16px;
     background-color: #fff;
-    padding: 25px 15px;
+    padding: 25px 15px 10px;
   }
 }