1. 将原 医生工作量分析（doctorWork） 改为 医院使用分析 （hospitalWork）

2. 添加 新的医生工作量数据（doctorWork）

src/api/dataAnalysis.js

@@ -1,12 +1,21 @@
 import request from "@/utils/request.js"
 // 获取医生工作量信息
-export function getDoctorWork(data) {
+export function getDoctorWork({page, limit, ...data}) {
+    return request({
+        url: '/data/analysis/docDemCount',
+        method: 'post',
+        data,
+        params: {page, limit}
+    })
+}
+// 医院使用分析
+export function getHospitalWork(data) {
     return request({
         url: '/data/analysis/doctorWorkCount',
         method: 'post',
         data
     })
-};
+}
 
 // 处方金额分析
 export function getRecipeMoney(data) {

src/api/system.js

@@ -116,6 +116,16 @@ export function getDepartSelect(data) {
     })
 };
 
+// 获取医生选择器 列表
+export function getDoctorSelect(data) {
+    return request({
+        url: '/portal/userMgr/listPain',
+        method: 'post',
+        data,
+        params: {page: 1, limit: 999}
+    })
+}
+
 // 获取科室列表
 export function getDepartList(data) {
     return request({

src/router/dataAnalysis.js

@@ -3,7 +3,15 @@ export default [{
     name: 'doctorWork',
     component: () => import('@/views/dataAnalysis/DoctorWork.vue'),
     meta: {
-        title: '医生工作量分析',
+        title: '医生工作量数据',
+        pftitle: '数据分析'
+    }
+}, {
+    path: 'hospitalWork',
+    name: 'hospitalWork',
+    component: () => import('@/views/dataAnalysis/HospitalWork.vue'),
+    meta: {
+        title: '医院使用分析',
         pftitle: '数据分析'
     }
 }, {

src/utils/format.js

@@ -97,4 +97,14 @@ export function numberToUpperCase(textIndex) {
         newString += sum(newTextIndex.substring(i, i + 1), i);
     }
     return newString;
+}
+
+export function formatMonth(date) {
+    if (!date) return '';
+    if (typeof date === 'number') date = new Date(date);
+    const year = date.getFullYear(); // 获取年份
+    const month = date.getMonth() + 1; // 获取月份，月份是从0开始的，所以需要加1
+    const formattedMonth = month < 10 ? '0' + month : month; // 如果月份小于10，前面补0
+
+    return `${year}-${formattedMonth}`; // 返回格式化后的字符串
 }

src/views/dataAnalysis/DoctorWork.vue

@@ -1,508 +1,243 @@
 <template>
-  <div class="doctorWork">
+  <div class="druglist">
     <!-- 顶部筛选 -->
     <div class="screening">
       <div class="screening-title flex-vertical-center-l">
-        <span></span>
-        <div>筛选</div>
+        <img src="~@/assets/filters.png" alt/>
       </div>
       <div class="screening-form flex-vertical-center-l flex-wrap">
         <div class="screening-item flex-vertical-center-l">
-          <span>年度：</span>
-          <div class="input">
-            <el-date-picker
-              size="mini"
-              @change="yearBlur"
-              v-model="form.year"
-              type="year"
-              placeholder="选择年"
-              :clearable="false"
-            ></el-date-picker>
+          <div class="input" style="display: flex;">
+            <el-date-picker size="mini" v-model="start" type="month" placeholder="起始年月"
+                            :picker-options="startPickerOptions" format="yyyy-MM"></el-date-picker>
+            <el-date-picker size="mini" v-model="end" type="month" placeholder="结束年月"
+                            :picker-options="endPickerOptions" format="yyyy-MM"></el-date-picker>
           </div>
         </div>
         <div class="screening-item flex-vertical-center-l">
-          <span>月度：</span>
+          <span>医疗机构名称：</span>
           <div class="input">
-            <el-date-picker
-              size="mini"
-              v-model="form.month"
-              format="MM"
-              type="month"
-              placeholder="选择月"
-            ></el-date-picker>
+            <el-select
+                size="mini"
+                v-model="cascader[1]"
+                placeholder="请选择"
+                @change="getCascaderC($event)"
+            >
+              <el-option
+                  :label="item.name"
+                  :value="item.pid"
+                  v-for="(item) in cascaderBOptions"
+                  :key="item.pid"
+              ></el-option>
+            </el-select>
           </div>
         </div>
         <div class="screening-item flex-vertical-center-l">
-          <span>机构名称：</span>
+          <span>科室名称：</span>
           <div class="input">
-            <el-select size="mini" v-model="form.medName" placeholder="请选择">
+            <el-select size="mini" v-model="cascader[2]" placeholder="请选择" multiple collapse-tags clearable
+                       @change="getCascaderD('')">
               <el-option
-                :label="item.name"
-                :value="item.pid"
-                v-for="(item,index) in medSelectList"
-                :key="index"
+                  :label="item.name"
+                  :value="item.pid"
+                  v-for="(item) in cascaderCOptions"
+                  :key="item.pid"
               ></el-option>
             </el-select>
           </div>
         </div>
         <div class="screening-item flex-vertical-center-l">
-          <div class="input flex-vertical-center-l">
-            <el-checkbox v-model="form.checked">是否包含下级</el-checkbox>
-          </div>
-        </div>
-        <div class="screening-item flex-vertical-center-l" v-if="false">
+          <span>医生名称：</span>
           <div class="input">
-            <el-select size="mini" v-model="form.depart" placeholder="请选择">
-              <el-option label="全部科室" :value="1"></el-option>
-              <el-option label="中医内科" :value="2"></el-option>
-              <el-option label="康复科" :value="3"></el-option>
+            <el-select size="mini" v-model="cascader[3]" placeholder="请输入关键词" multiple collapse-tags clearable
+                       reserve-keyword filterable remote :remote-method="getCascaderD" :loading="loadDoctorSelect"
+                       :disabled="!cascader[1]">
+              <el-option
+                  :label="item.username"
+                  :value="item.pid"
+                  v-for="(item) in cascaderDOptions"
+                  :key="item.pid"
+              ></el-option>
             </el-select>
           </div>
         </div>
+        <div class="screening-item flex-vertical-center-l">
+          <span>量级维度：</span>
+          <el-select size="mini" v-model="orderType" placeholder="请选择">
+            <el-option :label="item.label" :value="item.value" v-for="(item,index) in categoryOptions"
+                       :key="item.value"></el-option>
+          </el-select>
+        </div>
 
-        <el-button size="mini" type="primary" @click="search">搜索</el-button>
-        <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>
+        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
+        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>
+        <!--<el-button type="primary" size="mini" @click="exportDow()">导出</el-button>-->
       </div>
     </div>
-    <!-- 展示数据层 -->
-    <div class="showData">
-      <div class="flex-vertical-center-l">
-        <div class="top-change flex-vertical-center-l">
-          <div :class="isEcharts==0?'choosed':''" @click="topChange(0)">图表</div>
-          <div :class="isEcharts==1?'choosed':''" @click="topChange(1)">列表</div>
-        </div>
-        <div class="flex-center bg-yellow" v-if="isEcharts==1" @click="exportDow">导出</div>
-      </div>
-      <!-- 展示两种数据 -->
-      <div class="showEcharts" v-if="isEcharts==0">
-        <div id="myChart" :style="{width: '100%'}" class="myCharts"></div>
-        <div class="e-format">
-          格式:时间:数量
-          <span style="margin-left:30px;"></span> X轴:时间 Y轴:单位(个)
-        </div>
+
+    <!-- 底部表格数据 -->
+    <div class="today-data">
+      <div class="today-table">
+        <el-table :data="tableData" stripe style="width: 100%" height="100%" border>
+          <el-table-column prop="doctorName" label="医生" align="center" width="150"></el-table-column>
+          <el-table-column prop="id" label="机构 / 科室" align="center">
+            <template slot-scope="scope">
+              <div v-if="scope.row.stiName" class="fragment">{{ scope.row.stiName }}</div>
+              <div v-if="scope.row.deptName" class="fragment">{{ scope.row.deptName }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="docInCount" label="进入系统量" align="center" width="100"></el-table-column>
+          <el-table-column prop="docOutCount" label="辅诊系统推导给HIS量" align="center" width="150"></el-table-column>
+          <el-table-column prop="docPayCount" label="已收费处方量" align="center" width="100"></el-table-column>
+          <el-table-column prop="associationCount" label="协定方使用量" align="center" width="100"></el-table-column>
+          <el-table-column prop="pushCount" label="智能推导量" align="center" width="100"></el-table-column>
+          <el-table-column prop="dialecticalCount" label="智能辩证推导量" align="center" width="120"></el-table-column>
+          <el-table-column prop="prescriptionsCount" label="方剂检索量" align="center" width="100"></el-table-column>
+          <el-table-column prop="famousCount" label="名家医案检索量" align="center" width="120"></el-table-column>
+          <el-table-column prop="medicalCount" label="病历转方量" align="center" width="100"></el-table-column>
+        </el-table>
       </div>
-      <!-- 列表展示 -->
-      <div class="showList" v-if="isEcharts==1">
-        <ul>
-          <li class="flex-vertical-between" v-for="(item,index) in list" :key="index">
-            <div class="title">{{form.year |formMatD}}-{{item.id}}</div>
-            <div>
-              中医门诊量:
-              <span>{{item.outpatientCount}}</span>
-            </div>
-            <div>
-              中医住院量:
-              <span>{{item.hospitalCount}}</span>
-            </div>
-            <div>
-              饮片开方量:
-              <span>{{item.slicesCount}}</span>
-            </div>
-            <div>
-              颗粒剂开方量:
-              <span>{{item.particlesCount}}</span>
-            </div>
-            <div>
-              中药制剂开方量:
-              <span>{{item.chinaMadeCount}}</span>
-            </div>
-            <div>
-              适宜技术处方开方量:
-              <span>{{item.techCount}}</span>
-            </div>
-          </li>
-        </ul>
+      <div class="flex-vertical-center-r today-page">
+        <el-pagination
+            background
+            layout=" prev, pager, next, jumper, total"
+            :total="total"
+            :page-size="limit"
+            @current-change="sizeC($event)"
+        ></el-pagination>
       </div>
     </div>
   </div>
 </template>
 <script>
-import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
-import { medicalInstitution } from "@/api/city.js";
-import { getDoctorWork, exportDow } from "@/api/dataAnalysis.js";
+import {getDepartSelect, getDoctorSelect} from "@/api/system.js";
+import {medicalInstitution} from "@/api/city";
+import {getDoctorWork} from "@/api/dataAnalysis";
+import {formatMonth} from "@/utils/format";
+import {mapGetters} from "vuex";
+
 export default {
   data() {
     return {
-      // 筛选数据
-      form: {
-        medName: "",
-        year: "",
-        month: "",
-        checked: false,
-        depart: 1
+      loadDoctorSelect: false,
+      cascaderAOptions: [],
+      cascaderBOptions: [],
+      cascaderCOptions: [],
+      cascaderDOptions: [],
+      cascader: [],
+      orderType: void 0,
+      start: void 0,
+      end: Date.now(),
+
+      categoryOptions: [
+        {label: '进入系统量', value: '1'},
+        {label: '辅诊系统推导给HIS量', value: '2'},
+        {label: '已收费处方量', value: '6'},
+        {label: '智能辩证推导量', value: '3'},
+        {label: '智能推导量', value: '4'},
+        {label: '协定方使用量', value: '5'},
+        {label: '方剂检索量', value: '7'},
+        {label: '名家医案检索量', value: '8'},
+        {label: '病历转方量', value: '9'},
+      ],
+
+      tableData: [],
+
+      page: 1,
+      limit: 10,
+      total: 0,
+
+
+      startPickerOptions: {
+        disabledDate: (date) => {
+          const value = date.getTime();
+          return this.end && value > this.end.getTime() || value > Date.now()
+        }
       },
-      isFinish: 1, // 上一段函数 是否完成
-      // 医疗机构
-      medSelectList: [],
-      // 是否是图表
-      isEcharts: 0, // 0 图表 1 列表
-
-      list: [], // 列表
-      xAxisData: [], // 图表 横向坐标
-
-      chinaMadeCount: [], // 中药制剂开方数据
-      chinaPreCount: [], // 中药处方
-      hospitalCount: [], // 中医住院量
-      outpatientCount: [], //中医门诊量
-      particlesCount: [], // 颗粒剂开方量
-      slicesCount: [], // 饮片开方量
-      techCount: [] // 适宜技术处方
+      endPickerOptions: {
+        disabledDate: (date) => {
+          const value = date.getTime();
+          return this.start && value < this.start.getTime() || value > Date.now()
+        }
+      }
     };
   },
-  created() {},
-  mounted() {
-    let date = new Date();
-    this.form.year = date.getFullYear().toString();
-
-    this.medicalInstitution();
-    this.getDoctorWork();
-  },
-  filters: {
-    formMatD(value) {
-      let date = new Date(value);
-      let year = date.getFullYear();
-      let month = date.getMonth() + 1;
-
-      return year;
-    }
+  created() {
+    this.getCascaderB(this.getuserinfo.organizationid);
+    this.load();
   },
   methods: {
-    // 年份失去焦点
-    yearBlur(e) {
-      if (!e || e.length > 4 || e.length < 4) {
-        let date = new Date();
-        this.form.year = date.getFullYear().toString();
-      }
-    },
-    // 顶部列表更改
-    topChange(type) {
-      this.isEcharts = type;
-      if (type == 0) {
-        setTimeout(() => {
-          this.drawLine();
-          // this.drawLine2()
-        }, 200);
-      }
-    },
-    // 绘制 图表
-    drawLine() {
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = this.$echarts.init(document.getElementById("myChart"));
-      // 绘制图表
-      myChart.setOption({
-        grid: {
-          left: "1%",
-          right: "1%",
-          bottom: "3%",
-          containLabel: true
-        },
-        legend: {
-          data: [
-            "中医门诊量",
-            "中医住院量",
-            "中药处方开方量",
-            "饮片开方量",
-            "颗粒剂开方量",
-            "中药制剂开方量",
-            "适宜技术处方开方量"
-          ]
-        },
-        color: [
-          "#5FA0FA",
-          "#FFB703",
-          "#1bb2d8",
-          "#FD2446",
-          "#51CEC6",
-          "#DAEDF6",
-          "#FB925A"
-        ],
-        tooltip: {},
-        xAxis: {
-          type: "category",
-          data: this.xAxisData,
-          name: "时间",
-          nameLocation: "end"
-        },
-        yAxis: {
-          type: "value"
-          // name: "单位(个)"
-        },
-        series: [
-          {
-            name: "中医门诊量",
-            type: "bar",
-
-            data: this.outpatientCount
-          },
-          {
-            name: "中医住院量",
-            type: "bar",
-
-            data: this.hospitalCount
-          },
-          {
-            name: "中药处方开方量",
-            type: "bar",
-
-            data: this.chinaPreCount
-          },
-          {
-            name: "饮片开方量",
-            type: "bar",
-            // stack: "中药处方开方量",
-            data: this.slicesCount
-          },
-          {
-            name: "颗粒剂开方量",
-            type: "bar",
-            // stack: "中药处方开方量",
-            data: this.particlesCount
-          },
-          {
-            name: "中药制剂开方量",
-            type: "bar",
-            // stack: "中药处方开方量",
-            data: this.chinaMadeCount
-          },
-          {
-            name: "适宜技术处方开方量",
-            type: "bar",
-            data: this.techCount
-          }
-        ]
-      });
-    },
-    // 绘制饼图
-    drawLine2() {
-      let text = this.forMatDate(1, this.form.month)
-        ? "医生工作量分析-" +
-          this.forMatDate(0, this.form.year) +
-          "年" +
-          this.forMatDate(1, this.form.month) +
-          "月"
-        : "医生工作量分析-" + this.forMatDate(0, this.form.year) + "年";
-      // 基于准备好的dom，初始化echarts实例
-      let myChart = this.$echarts.init(document.getElementById("myChart"));
-      console.log(myChart, "chart");
-      // 绘制图表
-      myChart.setOption({
-        title: {
-          text: text,
-          // top: '10%',
-          left: "center"
-        },
-        tooltip: {
-          trigger: "item"
-        },
-        legend: {
-          orient: "vertical",
-          left: "left"
-        },
-        series: [
-          {
-            name: "医生工作量分析",
-            type: "pie",
-            radius: "50%",
-            data: [
-              {
-                name: "中医门诊量" + "-" + this.outpatientCount[0] + "个",
-
-                value: this.outpatientCount[0]
-              },
-              {
-                name: "中医住院量" + "-" + this.hospitalCount[0] + "个",
-
-                value: this.hospitalCount[0]
-              },
-              {
-                name: "中药处方开方量" + "-" + this.chinaPreCount[0] + "个",
-
-                value: this.chinaPreCount[0]
-              },
-              {
-                name: "饮片开方量" + "-" + this.slicesCount[0] + "个",
-                // type: 'bar',
-                stack: "中药处方开方量",
-                value: this.slicesCount[0]
-              },
-              {
-                name: "颗粒剂开方量" + "-" + this.particlesCount[0] + "个",
-                // type: 'bar',
-                stack: "中药处方开方量",
-                value: this.particlesCount[0]
-              },
-              {
-                name: "中药制剂开方量" + "-" + this.chinaMadeCount[0] + "个",
-                // type: 'bar',
-                stack: "中药处方开方量",
-                value: this.chinaMadeCount[0]
-              },
-              {
-                name: "适宜技术处方开方量" + "-" + this.techCount[0] + "个",
-                // type: 'bar',
-                value: this.techCount[0]
-              }
-            ],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
-              }
-            }
-          }
-        ]
-      });
-    },
     search() {
-      this.xAxisData = []; // 图表 横向坐标
-
-      this.chinaMadeCount = []; // 中药制剂开方数据
-      this.chinaPreCount = []; // 中药处方
-      this.hospitalCount = []; // 中医住院量
-      this.outpatientCount = []; //中医门诊量
-      this.particlesCount = []; // 颗粒剂开方量
-      this.slicesCount = []; // 饮片开方量
-      this.techCount = []; // 适宜技术处方
-
-      this.getDoctorWork();
+      this.page = 1;
+      this.load();
     },
     clearFilter() {
-      let date = new Date();
-
-      this.form = {
-        medName: "",
-        year: date.getFullYear().toString(),
-        month: "",
-        checked: false,
-        depart: 1
-      };
-      this.xAxisData = []; // 图表 横向坐标
-      this.chinaMadeCount = []; // 中药制剂开方数据
-      this.chinaPreCount = []; // 中药处方
-      this.hospitalCount = []; // 中医住院量
-      this.outpatientCount = []; //中医门诊量
-      this.particlesCount = []; // 颗粒剂开方量
-      this.slicesCount = []; // 饮片开方量
-      this.techCount = []; // 适宜技术处方
-
-      if (this.isFinish == 0) return;
-      this.getDoctorWork();
+      this.getCascaderB(this.getuserinfo.organizationid)
+      this.orderType = void 0;
+      this.start = void 0;
+      this.end = new Date();
+
+      this.load();
     },
-    // 处理选择器 时间数据
-    forMatDate(type, data) {
-      if (!data) return "";
-      // type : 0 year 1 month
-      let date = new Date(data);
-      let year = date.getFullYear();
-      let month = date.getMonth() + 1;
-      if (type == 0) {
-        return year;
-      } else if (type == 1) {
-        return month;
-      }
+    exportDow() {},
+
+    sizeC(e) {
+      // console.log(e, '1')
+      this.page = e;
+      this.load();
     },
     // 获取医疗机构选择器
-    async medicalInstitution() {
-      let params = {
-        organizationId: this.getuserinfo.organizationid
-      };
-      let res = await medicalInstitution(params);
+    async getCascaderB(id) {
+      this.cascader = [id, '', [], []];
+      this.cascaderBOptions = []
+      this.cascaderCOptions = []
+      this.cascaderDOptions = []
+      let res = await medicalInstitution({organizationId: id});
+      if (res.ResultCode == 0) { this.cascaderBOptions = res.Data; }
+    },
+    // 获取医疗机构下的科室
+    async getCascaderC(id) {
+      this.cascader = [this.cascader[0], id, [], []];
+      let res = await getDepartSelect({institutionId: id});
+      if (res.ResultCode == 0) { this.cascaderCOptions = res.Data; }
+
+      await this.getCascaderD().catch();
+    },
+    async getCascaderD(keyword) {
+      if (!this.cascader[1]) return;
+      this.loadDoctorSelect = true;
+      const res = await getDoctorSelect({
+        keyword,
+        organizationid: this.cascader[0] || '',
+        sititutionid: this.cascader[1] || '',
+        departmentsIds: this.cascader[2] || [],
+      })
       if (res.ResultCode == 0) {
-        this.medSelectList = res.Data;
+        this.cascaderDOptions = res.Data.Items;
       }
+      this.loadDoctorSelect = false;
     },
-    // 获取工作量分析数据
-    async getDoctorWork() {
-      this.isFinish = 0; //
+    // 获取列表
+    async load() {
       let params = {
-        month: this.forMatDate(1, this.form.month),
-        stiId: this.form.medName,
-        type: this.form.checked ? "0" : "1",
-        year: this.forMatDate(0, this.form.year)
+        page: this.page,
+        limit: this.limit,
+
+        orderType: this.orderType,
+        startMon: formatMonth(this.start),
+        endMon: formatMonth(this.end),
+        orgId: this.cascader[0] || '',
+        stiId: this.cascader[1] || '',
+        deptId: '',
+        deptIds: this.cascader[2] || [],
+        doctorIds: this.cascader[3] || [],
       };
       let res = await getDoctorWork(params);
       if (res.ResultCode == 0) {
-        this.list = res.Data;
-        if (!this.form.month) {
-          for (let i = 1; i <= 12; i++) {
-            let j = i < 10 ? "0" + i : i;
-            let xAxis = this.forMatDate(0, this.form.year) + "-" + j + "月";
-            this.xAxisData.push(xAxis);
-          }
-        } else {
-          this.xAxisData = [
-            this.forMatDate(0, this.form.year) +
-              "-" +
-              this.forMatDate(1, this.form.month) +
-              "月"
-          ];
-        }
-        res.Data.forEach((item, index) => {
-          this.chinaMadeCount.push(item.chinaMadeCount);
-          this.chinaPreCount.push(item.chinaPreCount);
-          this.hospitalCount.push(item.hospitalCount);
-          this.outpatientCount.push(item.outpatientCount);
-          this.particlesCount.push(item.particlesCount);
-          this.slicesCount.push(item.slicesCount);
-          this.techCount.push(item.techCount);
-        });
-        // 数里列表数据
-        this.list.filter((item, index) => {
-          if (this.form.month) {
-            return (item.id =
-              this.forMatDate(1, this.form.month) < 10
-                ? "0" + this.forMatDate(1, this.form.month)
-                : this.forMatDate(1, this.form.month));
-          } else {
-            return (item.id = index + 1 < 10 ? "0" + (index + 1) : index + 1);
-          }
-        });
-        let text = this.forMatDate(1, this.form.month)
-          ? this.forMatDate(0, this.form.year) +
-            "年" +
-            this.forMatDate(1, this.form.month) +
-            "月"
-          : this.forMatDate(0, this.form.year) + "年";
-        setTimeout(() => {
-          this.isFinish = 1; //
-          this.drawLine();
-          // this.drawLine2()
-        }, 200);
+        this.tableData = res.Data.Items;
+        this.total = res.Data.TotalRecordCount;
       }
     },
-    // 表导出
-    async exportDow() {
-      let params = {
-        month: this.forMatDate(1, this.form.month),
-        stiId: this.form.medName,
-        type: this.form.checked ? "0" : "1",
-        year: this.forMatDate(0, this.form.year)
-      };
-      const loading = this.$loading({
-        lock: true,
-        text: "正在导出，请稍后",
-        spinner: "el-icon-loading",
-        background: "rgba(0, 0, 0, 0.7)"
-      });
-      let res = await exportDow(params).catch(err => {
-        loading.close();
-      });
-      if (res.ResultCode == 0) {
-        let path = process.env.VUE_APP_UPLOAD + "file/" + res.ResultInfo;
-        const a = document.createElement("a"); // 创建a标签
-        a.setAttribute("download", ""); // download属性
-        a.setAttribute("href", path); // href链接
-        a.click(); // 自执行点击事件
-        a.remove();
-        this.$message({
-          type: "success",
-          message: "导出成功",
-          showClose: true
-        });
-        loading.close();
-      }
-    }
   },
   computed: {
     ...mapGetters(["getuserinfo"])
@@ -513,142 +248,171 @@ export default {
 @import "../../style/common.scss";
 @import "../../style/base.scss";
 
-.showData {
-  background: #fff;
-  border-radius: 10px;
+.today-data {
   margin-top: 5px;
-  padding: 10px;
+  padding: 10px 10px;
+  background: #ffffff;
+  border-radius: 5px;
   height: 71vh;
-  overflow: auto;
-
-  .top-change {
-    margin-bottom: 10px;
-    width: 100px;
-    height: 34px;
-    border-radius: 8px;
-    cursor: pointer;
-    border: 1px solid #dcdfe6;
-    font-size: 14px;
-
-    div:first-child {
-      border-radius: 8px 0 0 8px;
-    }
-
-    div:last-child {
-      border-radius: 0 8px 8px 0;
-    }
 
-    div {
-      height: 34px;
-      width: 50px;
-      box-sizing: border-box;
-      line-height: 34px;
-      text-align: center;
-    }
-
-    .choosed {
-      background: #5386f6;
-      color: #fff;
-    }
-  }
-
-  .bg-yellow {
-    border-radius: 8px;
-    background: #ffae45;
-    color: #fff;
+  .add {
     width: 74px;
-    height: 34px;
-    margin-bottom: 20px;
+    height: 36px;
+    background: #5386f6;
+    border-radius: 4px;
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
     cursor: pointer;
-    margin-left: 20px;
+    margin-bottom: 20px;
   }
 
-  .showEcharts {
-    width: 100%;
-
-    .myCharts {
-      height: 340px;
+  .today-table {
+    height: 89%;
+
+    .enable,
+    .disable {
+      width: 60px;
+      height: 24px;
+      background: #ff6245;
+      border-radius: 2px;
+      font-size: 14px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #ffffff;
+      cursor: pointer;
+      margin: 0 auto;
     }
-  }
 
-  .showList {
-    width: 100%;
+    .disable {
+      background: #68a8ff !important;
+    }
 
-    ul {
-      li {
-        padding: 15px;
-        border-bottom: 1px solid #dcdfe6;
+    .operation {
+      div {
+        width: 60px;
+        height: 24px;
+        background: #5386f6;
+        border-radius: 2px;
+        cursor: pointer;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
       }
 
-      li:hover {
-        background: #dcdfe6;
-        cursor: default;
+      .bg-yellow {
+        background: #ffae45;
+        margin-left: 15px;
       }
 
-      .title {
-        font-weight: bold;
-        color: #5386f6;
-        width: 90px;
+      .bg-default {
+        width: 80px;
+        margin-left: 15px;
       }
     }
   }
 }
-</style>
 
+.table-body::v-deep .el-table .cell {
+  text-align: center;
+}
+</style>
 <style lang="scss" scoped>
 @media screen and (min-width: 1681px) and (max-width: 1920px) {
-  .showData {
-    height: 81vh;
-
-    .showEcharts {
-      width: 100%;
+  .today-data {
+    height: 82vh;
+    padding: 10px;
+    // background: red;
 
-      .myCharts {
-        height: 400px;
-      }
+    .today-table {
+      height: 94%;
     }
   }
+
+  .today-table::v-deep .el-table td {
+    padding: 18px 0;
+  }
+
+  .today-table::v-deep .el-table th {
+    padding: 18px 0;
+  }
 }
 
 @media screen and (min-width: 1601px) and (max-width: 1680px) {
-  .showData {
-    height: 80vh;
-
-    .showEcharts {
-      width: 100%;
+  .today-data {
+    height: 81vh;
+    padding: 10px;
+    // background: red;
 
-      .myCharts {
-        height: 400px;
-      }
+    .today-table {
+      height: 94%;
     }
   }
+
+  .today-table::v-deep .el-table td {
+    padding: 16px 0;
+  }
+
+  .today-table::v-deep .el-table th {
+    padding: 20px 0;
+  }
 }
 
 @media screen and (min-width: 1361px) and (max-width: 1600px) {
-  .showData {
+  .today-data {
     height: 73vh;
+    padding: 10px;
+    // background: red;
 
-    .showEcharts {
-      width: 100%;
-
-      .myCharts {
-        height: 360px;
-      }
+    .today-table {
+      height: 92%;
     }
   }
+
+  .today-table::v-deep .el-table td {
+    padding: 10px 0;
+  }
+
+  .today-table::v-deep .el-table th {
+    padding: 14px 0;
+  }
 }
 
-@media screen and(min-width:1281px) and (max-width: 1360px) {
-  .showData {
+@media screen and(min-width: 1281px) and (max-width: 1360px) {
+  .today-data {
     height: 73vh;
+    padding: 5px;
+    // background: red;
 
-    .showEcharts {
-      width: 100%;
-
-      .myCharts {
-        height: 360px;
-      }
+    .today-table {
+      height: 92%;
     }
   }
+
+  .today-table::v-deep .el-table td {
+    padding: 5px 0;
+  }
+
+  .today-table::v-deep .el-table th {
+    padding: 5px 0;
+  }
+}
+
+.departmentidSelsourceName {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fragment {
+  display: inline-block;
+
+  & + .fragment::before {
+    content: "/";
+    margin: 0 4px;
+  }
 }
 </style>

src/views/dataAnalysis/HospitalWork.vue

@@ -0,0 +1,654 @@
+<template>
+  <div class="doctorWork">
+    <!-- 顶部筛选 -->
+    <div class="screening">
+      <div class="screening-title flex-vertical-center-l">
+        <span></span>
+        <div>筛选</div>
+      </div>
+      <div class="screening-form flex-vertical-center-l flex-wrap">
+        <div class="screening-item flex-vertical-center-l">
+          <span>年度：</span>
+          <div class="input">
+            <el-date-picker
+              size="mini"
+              @change="yearBlur"
+              v-model="form.year"
+              type="year"
+              placeholder="选择年"
+              :clearable="false"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="screening-item flex-vertical-center-l">
+          <span>月度：</span>
+          <div class="input">
+            <el-date-picker
+              size="mini"
+              v-model="form.month"
+              format="MM"
+              type="month"
+              placeholder="选择月"
+            ></el-date-picker>
+          </div>
+        </div>
+        <div class="screening-item flex-vertical-center-l">
+          <span>机构名称：</span>
+          <div class="input">
+            <el-select size="mini" v-model="form.medName" placeholder="请选择">
+              <el-option
+                :label="item.name"
+                :value="item.pid"
+                v-for="(item,index) in medSelectList"
+                :key="index"
+              ></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="screening-item flex-vertical-center-l">
+          <div class="input flex-vertical-center-l">
+            <el-checkbox v-model="form.checked">是否包含下级</el-checkbox>
+          </div>
+        </div>
+        <div class="screening-item flex-vertical-center-l" v-if="false">
+          <div class="input">
+            <el-select size="mini" v-model="form.depart" placeholder="请选择">
+              <el-option label="全部科室" :value="1"></el-option>
+              <el-option label="中医内科" :value="2"></el-option>
+              <el-option label="康复科" :value="3"></el-option>
+            </el-select>
+          </div>
+        </div>
+
+        <el-button size="mini" type="primary" @click="search">搜索</el-button>
+        <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>
+      </div>
+    </div>
+    <!-- 展示数据层 -->
+    <div class="showData">
+      <div class="flex-vertical-center-l">
+        <div class="top-change flex-vertical-center-l">
+          <div :class="isEcharts==0?'choosed':''" @click="topChange(0)">图表</div>
+          <div :class="isEcharts==1?'choosed':''" @click="topChange(1)">列表</div>
+        </div>
+        <div class="flex-center bg-yellow" v-if="isEcharts==1" @click="exportDow">导出</div>
+      </div>
+      <!-- 展示两种数据 -->
+      <div class="showEcharts" v-if="isEcharts==0">
+        <div id="myChart" :style="{width: '100%'}" class="myCharts"></div>
+        <div class="e-format">
+          格式:时间:数量
+          <span style="margin-left:30px;"></span> X轴:时间 Y轴:单位(个)
+        </div>
+      </div>
+      <!-- 列表展示 -->
+      <div class="showList" v-if="isEcharts==1">
+        <ul>
+          <li class="flex-vertical-between" v-for="(item,index) in list" :key="index">
+            <div class="title">{{form.year |formMatD}}-{{item.id}}</div>
+            <div>
+              中医门诊量:
+              <span>{{item.outpatientCount}}</span>
+            </div>
+            <div>
+              中医住院量:
+              <span>{{item.hospitalCount}}</span>
+            </div>
+            <div>
+              饮片开方量:
+              <span>{{item.slicesCount}}</span>
+            </div>
+            <div>
+              颗粒剂开方量:
+              <span>{{item.particlesCount}}</span>
+            </div>
+            <div>
+              中药制剂开方量:
+              <span>{{item.chinaMadeCount}}</span>
+            </div>
+            <div>
+              适宜技术处方开方量:
+              <span>{{item.techCount}}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+import { medicalInstitution } from "@/api/city.js";
+import { getHospitalWork, exportDow } from "@/api/dataAnalysis.js";
+export default {
+  data() {
+    return {
+      // 筛选数据
+      form: {
+        medName: "",
+        year: "",
+        month: "",
+        checked: false,
+        depart: 1
+      },
+      isFinish: 1, // 上一段函数 是否完成
+      // 医疗机构
+      medSelectList: [],
+      // 是否是图表
+      isEcharts: 0, // 0 图表 1 列表
+
+      list: [], // 列表
+      xAxisData: [], // 图表 横向坐标
+
+      chinaMadeCount: [], // 中药制剂开方数据
+      chinaPreCount: [], // 中药处方
+      hospitalCount: [], // 中医住院量
+      outpatientCount: [], //中医门诊量
+      particlesCount: [], // 颗粒剂开方量
+      slicesCount: [], // 饮片开方量
+      techCount: [] // 适宜技术处方
+    };
+  },
+  created() {},
+  mounted() {
+    let date = new Date();
+    this.form.year = date.getFullYear().toString();
+
+    this.medicalInstitution();
+    this.getHospitalWork();
+  },
+  filters: {
+    formMatD(value) {
+      let date = new Date(value);
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+
+      return year;
+    }
+  },
+  methods: {
+    // 年份失去焦点
+    yearBlur(e) {
+      if (!e || e.length > 4 || e.length < 4) {
+        let date = new Date();
+        this.form.year = date.getFullYear().toString();
+      }
+    },
+    // 顶部列表更改
+    topChange(type) {
+      this.isEcharts = type;
+      if (type == 0) {
+        setTimeout(() => {
+          this.drawLine();
+          // this.drawLine2()
+        }, 200);
+      }
+    },
+    // 绘制 图表
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("myChart"));
+      // 绘制图表
+      myChart.setOption({
+        grid: {
+          left: "1%",
+          right: "1%",
+          bottom: "3%",
+          containLabel: true
+        },
+        legend: {
+          data: [
+            "中医门诊量",
+            "中医住院量",
+            "中药处方开方量",
+            "饮片开方量",
+            "颗粒剂开方量",
+            "中药制剂开方量",
+            "适宜技术处方开方量"
+          ]
+        },
+        color: [
+          "#5FA0FA",
+          "#FFB703",
+          "#1bb2d8",
+          "#FD2446",
+          "#51CEC6",
+          "#DAEDF6",
+          "#FB925A"
+        ],
+        tooltip: {},
+        xAxis: {
+          type: "category",
+          data: this.xAxisData,
+          name: "时间",
+          nameLocation: "end"
+        },
+        yAxis: {
+          type: "value"
+          // name: "单位(个)"
+        },
+        series: [
+          {
+            name: "中医门诊量",
+            type: "bar",
+
+            data: this.outpatientCount
+          },
+          {
+            name: "中医住院量",
+            type: "bar",
+
+            data: this.hospitalCount
+          },
+          {
+            name: "中药处方开方量",
+            type: "bar",
+
+            data: this.chinaPreCount
+          },
+          {
+            name: "饮片开方量",
+            type: "bar",
+            // stack: "中药处方开方量",
+            data: this.slicesCount
+          },
+          {
+            name: "颗粒剂开方量",
+            type: "bar",
+            // stack: "中药处方开方量",
+            data: this.particlesCount
+          },
+          {
+            name: "中药制剂开方量",
+            type: "bar",
+            // stack: "中药处方开方量",
+            data: this.chinaMadeCount
+          },
+          {
+            name: "适宜技术处方开方量",
+            type: "bar",
+            data: this.techCount
+          }
+        ]
+      });
+    },
+    // 绘制饼图
+    drawLine2() {
+      let text = this.forMatDate(1, this.form.month)
+        ? "医生工作量分析-" +
+          this.forMatDate(0, this.form.year) +
+          "年" +
+          this.forMatDate(1, this.form.month) +
+          "月"
+        : "医生工作量分析-" + this.forMatDate(0, this.form.year) + "年";
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById("myChart"));
+      console.log(myChart, "chart");
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: text,
+          // top: '10%',
+          left: "center"
+        },
+        tooltip: {
+          trigger: "item"
+        },
+        legend: {
+          orient: "vertical",
+          left: "left"
+        },
+        series: [
+          {
+            name: "医生工作量分析",
+            type: "pie",
+            radius: "50%",
+            data: [
+              {
+                name: "中医门诊量" + "-" + this.outpatientCount[0] + "个",
+
+                value: this.outpatientCount[0]
+              },
+              {
+                name: "中医住院量" + "-" + this.hospitalCount[0] + "个",
+
+                value: this.hospitalCount[0]
+              },
+              {
+                name: "中药处方开方量" + "-" + this.chinaPreCount[0] + "个",
+
+                value: this.chinaPreCount[0]
+              },
+              {
+                name: "饮片开方量" + "-" + this.slicesCount[0] + "个",
+                // type: 'bar',
+                stack: "中药处方开方量",
+                value: this.slicesCount[0]
+              },
+              {
+                name: "颗粒剂开方量" + "-" + this.particlesCount[0] + "个",
+                // type: 'bar',
+                stack: "中药处方开方量",
+                value: this.particlesCount[0]
+              },
+              {
+                name: "中药制剂开方量" + "-" + this.chinaMadeCount[0] + "个",
+                // type: 'bar',
+                stack: "中药处方开方量",
+                value: this.chinaMadeCount[0]
+              },
+              {
+                name: "适宜技术处方开方量" + "-" + this.techCount[0] + "个",
+                // type: 'bar',
+                value: this.techCount[0]
+              }
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)"
+              }
+            }
+          }
+        ]
+      });
+    },
+    search() {
+      this.xAxisData = []; // 图表 横向坐标
+
+      this.chinaMadeCount = []; // 中药制剂开方数据
+      this.chinaPreCount = []; // 中药处方
+      this.hospitalCount = []; // 中医住院量
+      this.outpatientCount = []; //中医门诊量
+      this.particlesCount = []; // 颗粒剂开方量
+      this.slicesCount = []; // 饮片开方量
+      this.techCount = []; // 适宜技术处方
+
+      this.getHospitalWork();
+    },
+    clearFilter() {
+      let date = new Date();
+
+      this.form = {
+        medName: "",
+        year: date.getFullYear().toString(),
+        month: "",
+        checked: false,
+        depart: 1
+      };
+      this.xAxisData = []; // 图表 横向坐标
+      this.chinaMadeCount = []; // 中药制剂开方数据
+      this.chinaPreCount = []; // 中药处方
+      this.hospitalCount = []; // 中医住院量
+      this.outpatientCount = []; //中医门诊量
+      this.particlesCount = []; // 颗粒剂开方量
+      this.slicesCount = []; // 饮片开方量
+      this.techCount = []; // 适宜技术处方
+
+      if (this.isFinish == 0) return;
+      this.getHospitalWork();
+    },
+    // 处理选择器 时间数据
+    forMatDate(type, data) {
+      if (!data) return "";
+      // type : 0 year 1 month
+      let date = new Date(data);
+      let year = date.getFullYear();
+      let month = date.getMonth() + 1;
+      if (type == 0) {
+        return year;
+      } else if (type == 1) {
+        return month;
+      }
+    },
+    // 获取医疗机构选择器
+    async medicalInstitution() {
+      let params = {
+        organizationId: this.getuserinfo.organizationid
+      };
+      let res = await medicalInstitution(params);
+      if (res.ResultCode == 0) {
+        this.medSelectList = res.Data;
+      }
+    },
+    // 获取工作量分析数据
+    async getHospitalWork() {
+      this.isFinish = 0; //
+      let params = {
+        month: this.forMatDate(1, this.form.month),
+        stiId: this.form.medName,
+        type: this.form.checked ? "0" : "1",
+        year: this.forMatDate(0, this.form.year)
+      };
+      let res = await getHospitalWork(params);
+      if (res.ResultCode == 0) {
+        this.list = res.Data;
+        if (!this.form.month) {
+          for (let i = 1; i <= 12; i++) {
+            let j = i < 10 ? "0" + i : i;
+            let xAxis = this.forMatDate(0, this.form.year) + "-" + j + "月";
+            this.xAxisData.push(xAxis);
+          }
+        } else {
+          this.xAxisData = [
+            this.forMatDate(0, this.form.year) +
+              "-" +
+              this.forMatDate(1, this.form.month) +
+              "月"
+          ];
+        }
+        res.Data.forEach((item, index) => {
+          this.chinaMadeCount.push(item.chinaMadeCount);
+          this.chinaPreCount.push(item.chinaPreCount);
+          this.hospitalCount.push(item.hospitalCount);
+          this.outpatientCount.push(item.outpatientCount);
+          this.particlesCount.push(item.particlesCount);
+          this.slicesCount.push(item.slicesCount);
+          this.techCount.push(item.techCount);
+        });
+        // 数里列表数据
+        this.list.filter((item, index) => {
+          if (this.form.month) {
+            return (item.id =
+              this.forMatDate(1, this.form.month) < 10
+                ? "0" + this.forMatDate(1, this.form.month)
+                : this.forMatDate(1, this.form.month));
+          } else {
+            return (item.id = index + 1 < 10 ? "0" + (index + 1) : index + 1);
+          }
+        });
+        let text = this.forMatDate(1, this.form.month)
+          ? this.forMatDate(0, this.form.year) +
+            "年" +
+            this.forMatDate(1, this.form.month) +
+            "月"
+          : this.forMatDate(0, this.form.year) + "年";
+        setTimeout(() => {
+          this.isFinish = 1; //
+          this.drawLine();
+          // this.drawLine2()
+        }, 200);
+      }
+    },
+    // 表导出
+    async exportDow() {
+      let params = {
+        month: this.forMatDate(1, this.form.month),
+        stiId: this.form.medName,
+        type: this.form.checked ? "0" : "1",
+        year: this.forMatDate(0, this.form.year)
+      };
+      const loading = this.$loading({
+        lock: true,
+        text: "正在导出，请稍后",
+        spinner: "el-icon-loading",
+        background: "rgba(0, 0, 0, 0.7)"
+      });
+      let res = await exportDow(params).catch(err => {
+        loading.close();
+      });
+      if (res.ResultCode == 0) {
+        let path = process.env.VUE_APP_UPLOAD + "file/" + res.ResultInfo;
+        const a = document.createElement("a"); // 创建a标签
+        a.setAttribute("download", ""); // download属性
+        a.setAttribute("href", path); // href链接
+        a.click(); // 自执行点击事件
+        a.remove();
+        this.$message({
+          type: "success",
+          message: "导出成功",
+          showClose: true
+        });
+        loading.close();
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(["getuserinfo"])
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "../../style/common.scss";
+@import "../../style/base.scss";
+
+.showData {
+  background: #fff;
+  border-radius: 10px;
+  margin-top: 5px;
+  padding: 10px;
+  height: 71vh;
+  overflow: auto;
+
+  .top-change {
+    margin-bottom: 10px;
+    width: 100px;
+    height: 34px;
+    border-radius: 8px;
+    cursor: pointer;
+    border: 1px solid #dcdfe6;
+    font-size: 14px;
+
+    div:first-child {
+      border-radius: 8px 0 0 8px;
+    }
+
+    div:last-child {
+      border-radius: 0 8px 8px 0;
+    }
+
+    div {
+      height: 34px;
+      width: 50px;
+      box-sizing: border-box;
+      line-height: 34px;
+      text-align: center;
+    }
+
+    .choosed {
+      background: #5386f6;
+      color: #fff;
+    }
+  }
+
+  .bg-yellow {
+    border-radius: 8px;
+    background: #ffae45;
+    color: #fff;
+    width: 74px;
+    height: 34px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    margin-left: 20px;
+  }
+
+  .showEcharts {
+    width: 100%;
+
+    .myCharts {
+      height: 340px;
+    }
+  }
+
+  .showList {
+    width: 100%;
+
+    ul {
+      li {
+        padding: 15px;
+        border-bottom: 1px solid #dcdfe6;
+      }
+
+      li:hover {
+        background: #dcdfe6;
+        cursor: default;
+      }
+
+      .title {
+        font-weight: bold;
+        color: #5386f6;
+        width: 90px;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+@media screen and (min-width: 1681px) and (max-width: 1920px) {
+  .showData {
+    height: 81vh;
+
+    .showEcharts {
+      width: 100%;
+
+      .myCharts {
+        height: 400px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1601px) and (max-width: 1680px) {
+  .showData {
+    height: 80vh;
+
+    .showEcharts {
+      width: 100%;
+
+      .myCharts {
+        height: 400px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1361px) and (max-width: 1600px) {
+  .showData {
+    height: 73vh;
+
+    .showEcharts {
+      width: 100%;
+
+      .myCharts {
+        height: 360px;
+      }
+    }
+  }
+}
+
+@media screen and(min-width:1281px) and (max-width: 1360px) {
+  .showData {
+    height: 73vh;
+
+    .showEcharts {
+      width: 100%;
+
+      .myCharts {
+        height: 360px;
+      }
+    }
+  }
+}
+</style>