|
|
@@ -0,0 +1,483 @@
|
|
|
+<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('/middleCaseNumber')">
|
|
|
+ <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="'缺陷问题'" />
|
|
|
+ <ProblemTableBoxVue :data="caseList" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import { mapGetters } from 'vuex';
|
|
|
+import Title from '@/components/Title';
|
|
|
+import ProblemTableBoxVue from './components/ProblemTableBox.vue';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Title,
|
|
|
+ ProblemTableBoxVue,
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ caseList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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.funQuery();
|
|
|
+ this.selectInfo();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCaseList() {
|
|
|
+ let pramse = {
|
|
|
+ start_time: this.formData.startTime,
|
|
|
+ end_time: this.formData.endTime,
|
|
|
+ };
|
|
|
+ this.$axios2.post('/case-quality/defect_issues', pramse).then(res => {
|
|
|
+ this.caseList = res.data.list
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCounts() {
|
|
|
+ let pramse = {
|
|
|
+ start_time: this.formData.startTime,
|
|
|
+ end_time: this.formData.endTime,
|
|
|
+ };
|
|
|
+ this.$axios2.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);
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ },
|
|
|
+ initCharts1(pramse) {
|
|
|
+ this.$axios2.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: 16px 0;
|
|
|
+ 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;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
zdl