病案室医师排名

package.json

@@ -4,9 +4,9 @@
   "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
   "author": "Pan <panfree23@gmail.com>",
   "scripts": {
-    "dev": "vue-cli-service serve",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
+    "dev": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
+    "build:prod": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "build:stage": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --mode staging",
     "preview": "node build/index.js --preview",
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
     "lint": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint",

src/views/allcase/components/DoctorRank.vue

@@ -0,0 +1,108 @@
+<template>
+  <div style="padding-top: 20px;">
+    <div id="rank_chart" style="width: 100%; height: 520px;"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      data: {
+        type: Array,
+        default() {
+          return []
+        }
+      }
+    },
+    computed: {
+      yNames() {
+        const arr = []
+        this.data.map(item => {
+          arr.push(item.key)
+        })
+        return arr
+      },
+      qxCounts() {
+        const arr = []
+        this.data.map(item => {
+          arr.push(item.defect_doc_count)
+        })
+        return arr
+      },
+      blCounts() {
+        const arr = []
+        this.data.map(item => {
+          arr.push(item.doc_count)
+        })
+        return arr
+      }
+    },
+    mounted() {
+      this.renderChart()
+    },
+    methods: {
+      renderChart() {
+        var myChart = this.$echarts.init(document.getElementById('rank_chart'))
+        var option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          color: ['#54C5A0', '#5B8EC3'],
+          legend: {},
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value'
+          },
+          yAxis: {
+            type: 'category',
+            data: this.yNames,
+            axisLine: {
+              lineStyle: {
+                color: '#CFCFCF'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              color: '#333333'
+            }
+          },
+          series: [
+            {
+              name: '缺陷病历数',
+              type: 'bar',
+              stack: 'total',
+              barWidth: '20',
+              data: this.qxCounts
+            },
+            {
+              name: '病历总数',
+              type: 'bar',
+              stack: 'total',
+              barWidth: '20',
+              data: this.blCounts
+            }
+          ]
+        };
+        myChart.setOption(option)
+        // 窗口大小改变 重新渲染
+        window.addEventListener('resize', () => {
+          myChart.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/allcase/defectNumber.vue

@@ -5,9 +5,9 @@
         <div class="blockCon">
           <div class="selectDns"></div>
           <el-input v-model="formData.recordNum" placeholder="病案号"></el-input>
-          <span class="kong" v-if="score"></span>
-          <el-select v-model="doctor_name" clearable filterable class="selects" placeholder="医师姓名" v-if="score">
-            <el-option v-for="(item, index) in doctorList" :label="item.name" :value="item.name" :key="index"></el-option>
+          <span class="kong" v-if="sort"></span>
+          <el-select v-model="doctor_name" clearable filterable class="selects" placeholder="医师姓名" v-if="sort">
+            <el-option v-for="(item, index) in doctorList" :label="item" :value="item" :key="index"></el-option>
           </el-select>
           <span class="kong"></span>
           <el-select v-model="formData.AAC11N" clearable filterable class="selects" placeholder="出院科室">
@@ -39,7 +39,7 @@
       </div>
       <el-table :data="tableData" style="width: 100%">
         <el-table-column type="index" label="序号" width="80"></el-table-column>
-        <el-table-column prop="AAC11N" label="出院科室" width="200" v-if="error_rule || doc_count"></el-table-column>
+        <el-table-column prop="AAC11N" label="出院科室" width="200"></el-table-column>
         <el-table-column prop="AAA28" label="病案号" width="160">
           <template slot-scope="scope">
             <span class="blue" @click="funGoto(scope.row.MED_REC_ID)">
@@ -49,10 +49,10 @@
         </el-table-column>
         <el-table-column prop="AAC01" label="出院时间" width="160"></el-table-column>
         <el-table-column prop="AAA01" label="患者姓名" width="160" v-if="error_rule"></el-table-column>
-        <el-table-column prop="ZHFZRYSXM" label="医师姓名" v-if="score || doc_count"></el-table-column>
-        <el-table-column prop="rule_notice" label="缺陷问题描述" v-if="score || doc_count"></el-table-column>
-        <!-- <el-table-column prop="grading_scale" label="评分等级" v-if="score || doc_count"></el-table-column> -->
-        <el-table-column prop="" label="扣分" v-if="score">
+        <el-table-column prop="ZHFZRYSXM" label="医师姓名" v-if="!error_rule"></el-table-column>
+        <el-table-column prop="rule_notice" label="缺陷问题描述" v-if="!error_rule"></el-table-column>
+        <!-- <el-table-column prop="grading_scale" label="评分等级" v-if="sort == 'doc_count'"></el-table-column> -->
+        <el-table-column prop="" label="扣分" v-if="sort == 'score'">
           <template slot-scope="scope">
             <span>
               {{ Number( 100 - scope.row.score ) }}
@@ -90,7 +90,6 @@ export default {
         recordNum: '',
         rule_type: '',
       },
-      doc_count:'',
       doctor_name:'', // 医师姓名
       error_rule: '',
       score:'',
@@ -104,12 +103,13 @@ export default {
       levelList: [], //问题属性
       departmentList: [],
       doctorList: [], // 医师姓名列表
+      sort:''
     };
   },
   mounted() {
     this.error_rule = this.$route.query.rule_id;// 规则ID
-    this.score = this.$route.query.score;
-    this.doc_count = this.$route.query.doc_count;
+    this.sort = this.$route.query.sort;
+    this.doctor_name = this.$route.query.doctor_name;
     this.formData.startTime = this.storageGet('start_time');
     this.formData.endTime = this.storageGet('end_time');
     this.selectInfo();

src/views/allcase/index.vue

@@ -63,36 +63,109 @@
     </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 class="bg-card" style="margin-bottom: 24px; padding">
+      <!-- <Title :title="'缺陷问题'" /> -->
+      <CardTitle title="缺陷问题">
+        <el-image
+          class="title_arrow"
+          :class="{'arrow_top': !quxian_show}"
+          :src="require('../../assets/images/arrow-down.png')"
+          fit="contain"
+          @click="onToggleQuexianShow">
+        </el-image>
+      </CardTitle>
+      <el-collapse-transition>
+        <div v-show="quxian_show">
+          <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>
+      </el-collapse-transition>
+
+
     </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 class="bg-card" style="margin-bottom: 24px; padding">
+      <CardTitle title="医师排名">
+        <el-image
+          class="title_arrow"
+          :class="{'arrow_top': !doctor_show}"
+          :src="require('../../assets/images/arrow-down.png')"
+          fit="contain"
+          @click="onToggleDoctorShow">
+        </el-image>
+        <div class="xz-btn" @click.stop="handleExport">下载</div>
+      </CardTitle>
+
+      <el-collapse-transition>
+        <div v-show="doctor_show">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-table
+                :data="doctor_tableData"
+                class="mb20"
+                style="width: 100%">
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="80"
+                  align="center">
+                </el-table-column>
+                <el-table-column
+                  prop="key"
+                  label="医师姓名"
+                  align="center"
+                  show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column
+                  prop="doc_count"
+                  label="病历总数"
+                  align="center">
+                  <template slot-scope="scope">
+                    <span class="link" @click="toPageDoctor(scope.row,'doc_count')" style="color: #004983;">{{ scope.row.doc_count }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="score"
+                  label="总扣分"
+                  align="center">
+                  <template slot-scope="scope">
+                    <span class="link" @click="toPageDoctor(scope.row,'score')" style="color: #004983;">{{ scope.row.score }}</span>
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  prop="avg_score"
+                  label="平均分"
+                  align="center"
+                  show-overflow-tooltip>
+                </el-table-column>
+              </el-table>
+              <el-pagination
+                background
+                @size-change="handleDoctorSizeChange"
+                @current-change="handleDoctorCurrentChange"
+                :current-page="paginationDataDoctor.page"
+                :page-size="paginationDataDoctor.size"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="paginationDataDoctor.total">
+              </el-pagination>
+            </el-col>
+            <el-col :span="12">
+              <DoctorRankVue v-if="doctor_rank.length" :data="doctor_rank" />
+            </el-col>
+          </el-row>
         </div>
-        <div id="myChart2" style="width: 100%; height: 600px"></div>
-      </div>
+      </el-collapse-transition>
     </div>
-
   </div>
 </template>
   
@@ -102,15 +175,15 @@ 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'
+import DoctorRankVue from './components/DoctorRank.vue'
 
 export default {
   components: {
     Title,
     ProblemTableBoxVue,
     MedicalRecordTableBoxVue,
-    mPagination
+    DoctorRankVue
   },
   name: 'Dashboard',
   computed: {
@@ -150,16 +223,20 @@ export default {
       caseList: [],
       departmentList: [],
       doctorList:[], // 医生列表
-      medicalRecordList: [], // 医师排名
+      quxian_show: true,
+      // 医师排名
+      doctor_show: true,
+      doctor_tableData: [],
       // 分页数据
-      paginationData: {
-        total: 10,
-        currentPage: 1,
-        pageSize: 10,
+      paginationDataDoctor: {
+        page: 1,
+        size: 10,
+        total: 0
       },
     };
   },
   mounted() {
+    this.doctor_rank = JSON.parse(JSON.stringify(this.doctor_tableData)).slice(0, 10)
     this.storageSet('start_time', '');
     this.storageSet('end_time', '');
     this.formData.chooseDate = '30';
@@ -187,6 +264,22 @@ export default {
     next()
   },
   methods: {
+    toPageDoctor(row,sort) {
+      this.$router.push({ 
+      path: '/defectNumber',
+       query: { 
+        doctor_name: row.key,
+        sort,
+      }
+    })
+    },
+    // 医师排名
+    onToggleDoctorShow() {
+      this.doctor_show = !this.doctor_show
+    },
+    onToggleQuexianShow() {
+      this.quxian_show = !this.quxian_show
+    },
     // 获取医生列表
     getDoctorList(){
       this.$axios2.post('/case-quality/doctor_list').then(res => {
@@ -224,95 +317,49 @@ export default {
       });
     },
     // 获取医师排名
-    getMedicalRecordList() {
-      let pramse = {
+
+    // 分页
+    handleDoctorSizeChange(val) {
+      this.paginationData.page = 1
+      this.paginationData.size = val
+      this.getDoctorRank()
+    },
+    handleDoctorCurrentChange(val) {
+      this.paginationData.page = val
+      this.getDoctorRank()
+    },
+    
+    getDoctorRank() {
+      const { page, size } = this.paginationDataDoctor
+      const params = {
+        page,
+        page_size: size,
         start_time: this.formData.startTime,
         end_time: this.formData.endTime,
-        page_size: this.paginationData.pageSize,
-        page: this.paginationData.currentPage,
+        is_export: 0
       };
-      this.$axios2.post('/case-quality/medical_record_doctor', pramse).then(res => {
-        let medicalRecordList = res.data.list;
-        this.paginationData.total = res.data.count;
-        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();
+      this.$axios2.post('/case-quality/medical_record_doctor', params).then(res => {
+        const { count } = res.data
+        if (count < 10) {
+          for(let i=0; i<10 - count-1; i++) {
+            res.data.list.push({
+              "key": "",
+              "doc_count": '',
+              "defect_doc_count": '',
+              "score": '',
+              "svg_score": '',
+              "proportion": ""
+            })
+          }
+        }
+        this.doctor_tableData = res.data.list
+        this.paginationDataDoctor.total = res.data.count
+        this.doctor_rank = JSON.parse(JSON.stringify(res.data.list)).slice(0, 10)
+      })
     },
+    // pageHasChanged() {
+    //   this.getMedicalRecordList();
+    // },
     getCounts() {
       let pramse = {
         start_time: this.formData.startTime,
@@ -368,14 +415,14 @@ export default {
 
     // 医师排名导出
     handleExport() {
+      const { page, size } = this.paginationDataDoctor
       const params = {
+        page,
+        page_size: size,
         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])
@@ -415,7 +462,7 @@ export default {
       this.getCounts();
       this.getCaseList();
       // 获取医师排名
-      this.getMedicalRecordList();
+      this.getDoctorRank();
       // 缺陷病例统计
       this.getAnalysis();
       // 甲乙病级病例
@@ -696,17 +743,6 @@ export default {
   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%;
@@ -719,5 +755,69 @@ export default {
     flex: 1;
   }
 }
+// 卡片背景
+
+.pages {
+  .bg-card {
+    padding: 20px;
+    background: #fff;
+    border-radius: 5px;
+    overflow-x: hidden;
+  }
+  .mb20 {
+    margin-bottom: 20px;
+  }
+  .bg185DA6 {
+    background: #185DA6;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .link {
+    text-decoration: underline;
+    color: #FF786F;
+    cursor: pointer;
+  }
+  .link2 {
+    color: #004983;
+    cursor: pointer;
+  }
+  .c_FF786F {
+    color: #FF786F;
+  }
+}
+.title_arrow {
+  width: 10px;
+  height: 11px;
+  margin-left: 5px;
+  cursor: pointer;
+  &.arrow_top {
+    transform: rotate(180deg);
+  }
+}
+#tongji_pie {
+  height: 200px;
+}
+#qxxq_pie {
+  height: 600px;
+  margin-top: 68px;
+}
+.xz-btn{
+  width: 84px;
+  height: 32px;
+  text-align: center;
+  line-height: 32px;
+  background: #185DA6;
+  border-radius: 6px;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  position: absolute;
+  right: 20px;
+  top: 0;
+}
 </style>