diagnosis.admin/src/views/dataAnalysis/RecipeFrom.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" v-model="form.year" type="year" placeholder="选择年"></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" style="width:auto;">
            <el-checkbox v-model="form.checked">是否包含下级</el-checkbox>
          </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="showEcharts">
        <div id="myChart" :style="{width: '100%'}" class="myCharts"></div>
        <div class="e-format" style="margin-bottom:20px;">
          格式:中医疾病-时间:数量
          <span style="margin-left:30px;"></span> X轴:时间 Y轴:单位(个)
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { medicalInstitution } from "@/api/city.js";
import { getRecipeFrom } from "@/api/dataAnalysis.js";
export default {
  data() {
    return {
      // 筛选数据
      form: {
        medName: "",
        year: "",
        month: "",
        checked: false
      },
      // 医疗机构
      medSelectList: [],
      // 是否是图表
      isEcharts: 0, // 0 图表 1 列表

      associationCount: [], // 协定方开方
      dialecticalCount: [], // 只能辨证
      famousCount: [], // 名家验案
      medicalCount: [], // 病历转方
      myCount: [], // 自拟开方
      prescriptionsCount: [], // 方剂检索开方
      pushCount: [], // 智能推方

      xAxisData: [] // 图表 横向坐标
    };
  },
  created() {
    this.medicalInstitution();
  },
  mounted() {
    let date = new Date();
    this.form.year = date.getFullYear().toString();
    this.getRecipeFrom();
  },
  methods: {
    // 顶部列表更改
    topChange(type) {
      this.isEcharts = type;
      if (type == 0) {
        setTimeout(() => {
          this.drawLine();
        }, 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",
          "#48AD4B"
        ],
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.xAxisData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "智能辨证开方量",
            type: "bar",

            data: this.dialecticalCount
          },
          {
            name: "智能推方开方量",
            type: "bar",

            data: this.pushCount
          },
          {
            name: "协定方开方量",
            type: "bar",

            data: this.associationCount
          },
          {
            name: "自拟开方量",
            type: "bar",

            data: this.myCount
          },
          {
            name: "方剂检索开方量",
            type: "bar",

            data: this.prescriptionsCount
          },
          {
            name: "名家医案开方量",
            type: "bar",

            data: this.famousCount
          },
          {
            name: "病历转方量",
            type: "bar",

            data: this.medicalCount
          }
        ]
      });
    },
    search() {
      this.getRecipeFrom();
    },
    clearFilter() {
      let date = new Date();
      this.form = {
        medName: "",
        year: date.getFullYear().toString(),
        month: "",
        checked: false
      };
      this.getRecipeFrom();
    },
    // 处理选择器 时间数据
    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 getRecipeFrom() {
      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 getRecipeFrom(params);
      if (res.ResultCode == 0) {
        this.xAxisData = [];
        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) +
              "月"
          ];
        }
        let associationCount = [], // 协定方开方
          dialecticalCount = [], // 只能辨证
          famousCount = [], // 名家验案
          medicalCount = [], // 病历转方
          myCount = [], // 自拟开方
          prescriptionsCount = [], // 方剂检索开方
          pushCount = []; // 智能推方

        res.Data.forEach((item, index) => {
          associationCount.push(item.associationCount);
          dialecticalCount.push(item.dialecticalCount);
          famousCount.push(item.famousCount);
          medicalCount.push(item.medicalCount);
          myCount.push(item.myCount);
          prescriptionsCount.push(item.prescriptionsCount);
          pushCount.push(item.pushCount);
        });

        this.associationCount = associationCount; // 协定方开方
        this.dialecticalCount = dialecticalCount; // 只能辨证
        this.famousCount = famousCount; // 名家验案
        this.medicalCount = medicalCount; // 病历转方
        this.myCount = myCount; // 自拟开方
        this.prescriptionsCount = prescriptionsCount; // 方剂检索开方
        this.pushCount = pushCount; // 智能推方

        this.drawLine();
      }
    }
  },
  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: 20px;
    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: 360px;
    }
  }

  .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: 500px;
      }
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .showData {
    height: 80vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 500px;
      }
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .showData {
    height: 73vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 410px;
      }
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .showData {
    height: 73vh;

    .showEcharts {
      width: 100%;

      .myCharts {
        height: 410px;
      }
    }
  }
}
</style>