|
|
@@ -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>
|
|
|
|
gaoxizhong