diagnosis.admin/src/views/dataAnalysis/HospitalWork.vue

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