医生统计图添加

src/App.vue

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-04-19 10:23:19
  * @LastEditors: wally
- * @LastEditTime: 2021-05-11 18:45:33
+ * @LastEditTime: 2021-05-12 11:48:09
 -->
 <template>
   <a-config-provider :locale="zh_CN">
@@ -40,10 +40,10 @@ export default {
   },
   created() {
     // async created() {
-    //   const userId = '1210049212671201280';
+    // const userId = '1210049212671201280';
-    //   const params = { userId };
+    // const params = { userId };
-    //   await this.getUserId(params);
+    // await this.getUserId(params);
-    //   await this.getToken();
+    // await this.getToken();
     if (localStorage.getItem('patientId')) {
       this.setPatientId(localStorage.getItem('patientId'));
     }

src/components/Echarts/Categorymap.vue

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-01-29 14:45:02
  * @LastEditors: wally
- * @LastEditTime: 2021-04-26 18:13:05
+ * @LastEditTime: 2021-05-12 11:24:23
 -->
 <template>
   <!-- <div>数据统计组件</div> -->
@@ -33,16 +33,29 @@ export default {
   },
   mounted() {
     this.init(this.drawLine);
+    window.onresize = () => {
+      return (() => {
+        that.init(this.drawLine);
+      })();
+    };
   },
+
   methods: {
     async drawLine() {
+      this.list = [];
+      this.xDataList = [];
+      this.aList = [];
+      this.bList = [];
+      this.cList = [];
+      this.dList = [];
+      this.eList = [];
       // 基于准备好的dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById('Categorymap'));
-      await this.getData();
       // 绘制图表
+      await this.getData();
       var option = {
         legend: {
-          data: ['新建', '数据收集按时完成', '数据收集中', '废弃', '数据收集超时中'],
+          data: ['新建', '数据收集按时完成', '数据收集中', '废弃', '数据收集超时'],
           top: 30,
         },
         xAxis: [
@@ -180,7 +193,7 @@ export default {
             },
           },
           {
-            name: '数据收集超时中',
+            name: '数据收集超时',
             type: 'bar',
             // label: labelOption,
             emphasis: { focus: 'series' },

src/components/Echarts/CategorymapHos.vue

@@ -0,0 +1,252 @@
+<template>
+  <!-- <div>数据统计组件</div> -->
+  <div style="width: 100%; height: 350px" class="chart-box">
+    <div id="Categorymap" style="height: 350px"></div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import { doctorComplete } from 'config/api';
+import mixins from 'views/Mixin/mixin.js';
+export default {
+  name: 'Categorymap',
+  mixins: [mixins],
+  data() {
+    return {
+      width: '',
+      height: '',
+      list: [],
+      xDataList: [],
+      aList: [], // 未完成数组
+      bList: [], // 已完成数组
+      cList: [], // 进行中数组
+      dList: [], // 废弃的数组
+      eList: [], // 超时的数组
+    };
+  },
+  computed: mapState('home', ['hospitalId']),
+  mounted() {
+    this.init(this.drawLine);
+    const that = this;
+    window.onresize = () => {
+      return (() => {
+        that.init(this.drawLine);
+      })();
+    };
+  },
+  created() {},
+  methods: {
+    async drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('Categorymap'));
+      await this.getData(this.hospitalId);
+      // 绘制图表
+      var option = {
+        legend: {
+          data: ['新建', '数据收集按时完成', '数据收集中', '废弃', '数据收集超时'],
+          top: 30,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: this.xDataList,
+          },
+        ],
+        yAxis: [{ type: 'value' }],
+        series: [
+          {
+            name: '新建',
+            type: 'bar',
+            barGap: 0,
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: this.aList,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                label: {
+                  formatter: '{c}',
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    fontSize: '12',
+                    color: '#000',
+                  },
+                },
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#FCB155' }, //柱图渐变色
+                  { offset: 1, color: '#EC535F' }, //柱图渐变色
+                ]),
+              },
+              emphasis: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#FCB155' }, //柱图高亮渐变色
+                  { offset: 1, color: '#EC535F' }, //柱图高亮渐变色
+                ]),
+              },
+            },
+          },
+          {
+            name: '数据收集按时完成',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: this.bList,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                label: {
+                  formatter: '{c}',
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    fontSize: '12',
+                    color: '#000',
+                  },
+                },
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#6D46FF' }, //柱图渐变色
+                  { offset: 1, color: '#360CE6' }, //柱图渐变色
+                ]),
+              },
+              emphasis: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#6D46FF' }, //柱图高亮渐变色
+                  { offset: 1, color: '#360CE6' }, //柱图高亮渐变色
+                ]),
+              },
+            },
+          },
+          {
+            name: '数据收集中',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: this.cList,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                label: {
+                  formatter: '{c}',
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    fontSize: '12',
+                    color: '#000',
+                  },
+                },
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#96E5F4' }, //柱图渐变色
+                  { offset: 1, color: '#21B0DC' }, //柱图渐变色
+                ]),
+              },
+              emphasis: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#96E5F4' }, //柱图高亮渐变色
+                  { offset: 1, color: '#21B0DC' }, //柱图高亮渐变色
+                ]),
+              },
+            },
+          },
+          {
+            name: '废弃',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: this.dList,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                label: {
+                  formatter: '{c}',
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    fontSize: '12',
+                    color: '#000',
+                  },
+                },
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#f00' }, //柱图渐变色
+                  { offset: 1, color: '#F00' }, //柱图渐变色
+                ]),
+              },
+              emphasis: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#F00' }, //柱图高亮渐变色
+                  { offset: 1, color: '#F00' }, //柱图高亮渐变色
+                ]),
+              },
+            },
+          },
+          {
+            name: '数据收集超时',
+            type: 'bar',
+            // label: labelOption,
+            emphasis: { focus: 'series' },
+            data: this.eList,
+            barWidth: 20,
+            itemStyle: {
+              normal: {
+                label: {
+                  formatter: '{c}',
+                  show: true,
+                  position: 'top',
+                  textStyle: {
+                    fontSize: '12',
+                    color: '#000',
+                  },
+                },
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#F5D041' }, //柱图渐变色
+                  { offset: 1, color: '#FF9000' }, //柱图渐变色
+                ]),
+              },
+              emphasis: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#F5D041' }, //柱图高亮渐变色
+                  { offset: 1, color: '#FF9000' }, //柱图高亮渐变色
+                ]),
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+    async getData(hospitalId) {
+      try {
+        const params = { param: { hospitalId } };
+        const res = await doctorComplete(params);
+        const { code, msg, data } = res.data;
+        if (code === 200) {
+          this.xDataList = [];
+          this.aList = [];
+          this.bList = [];
+          this.cList = [];
+          this.dList = [];
+          this.eList = [];
+          for (let i = 0; i < data.length; i++) {
+            this.forList(data[i]);
+          }
+        } else {
+          this.$message.error('获取数据失败');
+        }
+      } catch (error) {
+        this.$message.error('获取数据失败');
+      }
+    },
+    forList(obj) {
+      this.xDataList.push(obj.doctorName);
+      this.aList.push(obj.unfinished);
+      this.bList.push(obj.completed);
+      this.cList.push(obj.underway);
+      this.dList.push(obj.discarded);
+      this.eList.push(obj.overtime);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped ></style>

src/components/Echarts/Piemap.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-04-19 10:23:19
+ * @LastEditors: wally
+ * @LastEditTime: 2021-05-12 11:49:10
+-->
 <template>
   <!-- <div>数据统计组件</div> -->
   <div style="width: 100%; height: 300px; text-align: center" class="chart-box">
@@ -35,7 +42,7 @@ export default {
           {
             name: '生物样本数量',
             type: 'pie',
-            radius: ['20%', '80%'],
+            radius: ['10%', '70%'],
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: { borderRadius: 8 },

src/components/Echarts/PiemapHos.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-04-19 10:23:19
+ * @LastEditors: wally
+ * @LastEditTime: 2021-05-12 11:49:39
+-->
 <template>
   <!-- <div>数据统计组件</div> -->
   <div style="width: 50%; height: 300px" class="chart-box">
@@ -37,7 +44,7 @@ export default {
           {
             name: '生物样本数量',
             type: 'pie',
-            radius: [20, 100],
+            radius: ['10%', '70%'],
             center: ['50%', '50%'],
             roseType: 'area',
             itemStyle: { borderRadius: 8 },

src/config/api.js

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-01-29 11:16:27
  * @LastEditors: wally
- * @LastEditTime: 2021-05-11 18:33:24
+ * @LastEditTime: 2021-05-12 10:40:06
  */
 import axios from 'axios';
 let { proxyUrl } = require('@/config/setting');
@@ -64,6 +64,9 @@ export const countAnalysis = params => axios.post(`${statistics}/countAnalysis`,
 // 查询各医院病例完成情况
 export const HospitalComplete = params => axios.post(`${statistics}/hospital/complete`, params);
 
+// 查询医生的病例的完成情况
+export const doctorComplete = params => axios.post(`${statistics}/doctor/complete`, params);
+
 // 查询每日病例统计
 export const countCase = params => axios.post(`${statistics}/countCase`, params);
 

src/store/modules/home/state.js

@@ -1,3 +1,10 @@
+/*
+ * @Author: wally
+ * @email: 18603454788@163.com
+ * @Date: 2021-04-19 10:23:19
+ * @LastEditors: wally
+ * @LastEditTime: 2021-05-12 11:47:28
+ */
 const state = {
   anyringToken: '',
   user: { id: '', phone: '', account: '' },

src/views/Index/Index.vue

@@ -3,7 +3,7 @@
  * @email: 18603454788@163.com
  * @Date: 2021-02-22 09:20:03
  * @LastEditors: wally
- * @LastEditTime: 2021-04-21 19:27:05
+ * @LastEditTime: 2021-05-12 10:42:57
 -->
 <template>
   <div class="flex-wrap">
@@ -17,8 +17,9 @@
       </a-card>
     </div>
     <div class="fill-width mb-3">
-      <a-card style="width: 100%; height: 400px" title="各医院病例分析">
+      <a-card style="width: 100%; height: 400px" :title="hospitalId ? '医生病例分析' : '各医院病例分析'">
-        <categorymap />
+        <categorymap v-if="hospitalId === ''" />
+        <categorymap-hos v-else />
       </a-card>
     </div>
     <div class="fill-width mb-3">
@@ -33,12 +34,13 @@
 import Treemap from 'components/Echarts/Treemap.vue';
 import Cisualmap from 'components/Echarts/Cisualmap.vue';
 import Categorymap from 'components/Echarts/Categorymap.vue';
+import CategorymapHos from 'components/Echarts/CategorymapHos.vue';
 import Piemap from 'components/Echarts/Piemap.vue';
 import PiemapHos from 'components/Echarts/PiemapHos.vue';
 import { mapState } from 'vuex';
 export default {
   name: 'Index',
-  components: { Treemap, Cisualmap, Categorymap, Piemap, PiemapHos },
+  components: { Treemap, Cisualmap, Categorymap, Piemap, PiemapHos, CategorymapHos },
   data() {
     return {
       str: '',