diagnosis.admin/src/views/dataAnalysis/Cure.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">
            <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="data-container">
      <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="exportCure">导出</div>
        </div>
        <!-- 展示两种数据 -->
        <div class="showEcharts" v-if="isEcharts==0">
          <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format" style="margin-bottom:20px;">
            格式:体质结果-时间:数量
            <span style="margin-left:30px;"></span> X轴:体质结果-时间 Y轴:单位(人)
          </div>
        </div>

        <!-- 列表展示 -->
        <div class="showList" v-if="isEcharts==1">
          <ul>
            <div class="title1">体质结果与性别分布量</div>
            <li class="flex-vertical-between" v-for="(item,index) in list1" :key="index">
              <div class="title">{{item.year}}</div>
              <div>
                体质结果：
                <span>{{item.name}}</span>
              </div>
              <div>
                男:
                <span>{{item.man}}</span>
              </div>
              <div>
                女:
                <span>{{item.woman}}</span>
              </div>
            </li>
          </ul>
          <ul>
            <div class="title1">体质结果与年龄段分布量</div>
            <li class="flex-vertical-between" v-for="(item,index) in list2" :key="index">
              <div class="title">{{item.year}}</div>
              <div>
                体质结果：
                <span>{{item.name}}</span>
              </div>
              <div>
                10岁以下:
                <span>{{item.ac1}}</span>
              </div>
              <div>
                10岁—30岁:
                <span>{{item.ac2}}</span>
              </div>
              <div>
                30岁—50岁:
                <span>{{item.ac3}}</span>
              </div>
              <div>
                50岁-60岁:
                <span>{{item.ac4}}</span>
              </div>
              <div>
                60岁以上:
                <span>{{item.ac5}}</span>
              </div>
            </li>
          </ul>
          <ul>
            <div class="title1">体质测评人数与年龄段分布量</div>
            <li class="flex-vertical-between" v-for="(item,index) in list3" :key="index">
              <div class="title">{{item.year}}</div>
              <div>
                10岁以下:
                <span>{{item.ac1}}</span>
              </div>
              <div>
                10岁—30岁:
                <span>{{item.ac2}}</span>
              </div>
              <div>
                30岁—50岁:
                <span>{{item.ac3}}</span>
              </div>
              <div>
                50岁-60岁:
                <span>{{item.ac4}}</span>
              </div>
              <div>
                60岁以上:
                <span>{{item.ac5}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="showData" v-if="isEcharts==0">
        <div class="showEcharts">
          <div id="myChart1" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format" style="margin-bottom:20px;">
            格式:体质结果-时间:数量
            <span style="margin-left:30px;"></span> X轴:体质结果-时间 Y轴:单位(人)
          </div>
        </div>
      </div>
      <div class="showData" v-if="isEcharts==0">
        <div class="showEcharts">
          <div id="myChart2" :style="{width: '100%', height: '400px'}"></div>
          <div class="e-format" style="margin-bottom:20px;">
            格式:时间:数量
            <span style="margin-left:30px;"></span> X轴:体质结果-时间 Y轴:单位(人)
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
import { medicalInstitution } from "@/api/city.js";
import { cureCount, exportCure } from "@/api/dataAnalysis.js";
export default {
  data() {
    return {
      // 筛选数据
      form: {
        medName: "",
        year: "",
        month: "",
        checked: false
      },
      // 医疗机构
      medSelectList: [],
      // 是否是图表
      isEcharts: 0, // 0 图表 1 列表
      xAxisData: [], // 图表 横向坐标
      xAxisData1: [],
      xAxisData2: [],
      physicalAndSexCountVoList: [], // 体质结果与性别
      physicalAndAgeCountVoList: [], // 体质结果 与年龄段

      measurementCountVos: [], // 测评人数与年龄段

      list1: [],
      list2: [],
      list3: []
    };
  },
  created() {
    this.medicalInstitution();
  },
  mounted() {
    let date = new Date();
    this.form.year = date.getFullYear().toString();
    this.cureCount();
  },
  methods: {
    // 顶部列表更改
    topChange(type) {
      this.isEcharts = type;
      if (type == 0) {
        setTimeout(() => {
          this.cureCount();
        }, 200);
      }
    },
    // 绘制 图表
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "体质测评人数与年龄段分布量",

          left: "center"
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          orient: "vertical",
          left: "left"
        },

        color: ["#5FA0FA", "#FFB703", "#1bb2d8", "#FD2446", "#51CEC6"],
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.xAxisData2
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "10岁以下",
            type: "bar",

            data: this.measurementCountVos[0]
          },
          {
            name: "10岁—30岁",
            type: "bar",

            data: this.measurementCountVos[1]
          },
          {
            name: "30岁—50岁",
            type: "bar",

            data: this.measurementCountVos[2]
          },
          {
            name: "50岁-60岁",
            type: "bar",

            data: this.measurementCountVos[3]
          },
          {
            name: "60岁以上",
            type: "bar",

            data: this.measurementCountVos[4]
          }
        ]
      });
    },
    // 绘制 图表
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "体质结果与年龄段分布量",

          left: "center"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true
        },

        color: ["#5FA0FA", "#FFB703", "#1bb2d8", "#FD2446", "#51CEC6"],
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.xAxisData1
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "10岁以下",
            type: "bar",

            data: this.physicalAndAgeCountVoList[0]
          },
          {
            name: "10岁—30岁",
            type: "bar",

            data: this.physicalAndAgeCountVoList[1]
          },
          {
            name: "30岁—50岁",
            type: "bar",

            data: this.physicalAndAgeCountVoList[2]
          },
          {
            name: "50岁-60岁",
            type: "bar",

            data: this.physicalAndAgeCountVoList[3]
          },
          {
            name: "60岁以上",
            type: "bar",

            data: this.physicalAndAgeCountVoList[4]
          }
        ]
      });
    },
    // 绘制 图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {
          orient: "vertical",
          left: "left"
        },
        title: {
          text: "体质结果与性别分布量",

          left: "center"
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "3%",
          containLabel: true
        },

        color: ["#5FA0FA", "#FFB703", "#1bb2d8", "#FD2446", "#51CEC6"],
        tooltip: {},
        xAxis: {
          type: "category",
          data: this.xAxisData
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "男",
            type: "bar",

            data: this.physicalAndSexCountVoList[0]
          },
          {
            name: "女",
            type: "bar",

            data: this.physicalAndSexCountVoList[1]
          }
        ]
      });
    },
    search() {
      this.cureCount();
    },
    clearFilter() {
      let date = new Date();
      this.form = {
        medName: "",
        year: date.getFullYear().toString(),
        month: "",
        checked: false
      };
      this.cureCount();
    },
    // 处理选择器 时间数据
    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 cureCount() {
      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 cureCount(params);
      if (res.ResultCode == 0) {
        let data = res.Data[0];

        // 体质结果与性别
        let physicalAndSexCountVoList = [];
        let man = [];
        let woman = [];
        this.xAxisData = [];
        let list1 = [];

        data.physicalAndSexCountVoList.forEach(item => {
          let obj = {
            name: item.physicalName,
            man: item.manCount,
            woman: item.womanCount,
            year: ""
          };
          if (!this.form.month) {
            let xAxis =
              item.physicalName + "-" + this.forMatDate(0, this.form.year);
            this.xAxisData.push(xAxis);
            obj.year = this.forMatDate(0, this.form.year);
          } else {
            let xAxis =
              item.physicalName +
              "-" +
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
            this.xAxisData.push(xAxis);
            obj.year =
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
          }

          man.push(item.manCount);
          woman.push(item.womanCount);

          list1.push(obj);
        });

        this.list1 = list1;

        physicalAndSexCountVoList.push(man);
        physicalAndSexCountVoList.push(woman);
        this.physicalAndSexCountVoList = physicalAndSexCountVoList;

        // 体质结果 与年龄段
        let physicalAndAgeCountVoList = [];
        this.xAxisData1 = [];
        let ac1 = [];
        let ac2 = [];
        let ac3 = [];
        let ac4 = [];
        let ac5 = [];
        let list2 = [];

        data.physicalAndAgeCountVoList.forEach(item => {
          let obj = {
            ac1: item.ageCount1,
            ac2: item.ageCount2,
            ac3: item.ageCount3,
            ac4: item.ageCount4,
            ac5: item.ageCount5,
            year: "",
            name: item.physicalName
          };

          if (!this.form.month) {
            let xAxis =
              item.physicalName + "-" + this.forMatDate(0, this.form.year);
            this.xAxisData1.push(xAxis);
            obj.year = this.forMatDate(0, this.form.year);
          } else {
            let xAxis =
              item.physicalName +
              "-" +
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
            this.xAxisData1.push(xAxis);
            obj.year =
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
          }

          ac1.push(item.ageCount1);
          ac2.push(item.ageCount2);
          ac3.push(item.ageCount3);
          ac4.push(item.ageCount4);
          ac5.push(item.ageCount5);

          list2.push(obj);
        });
        physicalAndAgeCountVoList.push(ac1);
        physicalAndAgeCountVoList.push(ac2);
        physicalAndAgeCountVoList.push(ac3);
        physicalAndAgeCountVoList.push(ac4);
        physicalAndAgeCountVoList.push(ac5);
        this.physicalAndAgeCountVoList = physicalAndAgeCountVoList;
        this.list2 = list2;

        // 测评人数和年龄段
        let measurementCountVos = [];
        this.xAxisData2 = [];
        let mac1 = [];
        let mac2 = [];
        let mac3 = [];
        let mac4 = [];
        let mac5 = [];
        let list3 = [];

        data.measurementCountVos.forEach(item => {
          let obj = {
            ac1: item.ageCount1,
            ac2: item.ageCount2,
            ac3: item.ageCount3,
            ac4: item.ageCount4,
            ac5: item.ageCount5,
            year: ""
          };

          if (!this.form.month) {
            let xAxis = this.forMatDate(0, this.form.year) + "年";
            this.xAxisData2.push(xAxis);
            obj.year = this.forMatDate(0, this.form.year);
          } else {
            let xAxis =
              this.forMatDate(0, this.form.year) +
              "年" +
              this.forMatDate(1, this.form.month) +
              "月";
            this.xAxisData2.push(xAxis);
            obj.year =
              this.forMatDate(0, this.form.year) +
              "-" +
              this.forMatDate(1, this.form.month) +
              "月";
          }
          mac1.push(item.ageCount1);
          mac2.push(item.ageCount2);
          mac3.push(item.ageCount3);
          mac4.push(item.ageCount4);
          mac5.push(item.ageCount5);

          list3.push(obj);
        });
        measurementCountVos.push(mac1);
        measurementCountVos.push(mac2);
        measurementCountVos.push(mac3);
        measurementCountVos.push(mac4);
        measurementCountVos.push(mac5);

        this.measurementCountVos = measurementCountVos;
        this.list3 = list3;

        this.drawLine();
        this.drawLine1();
        this.drawLine2();
      }
    },
    // 治未病 导出
    async exportCure() {
      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 exportCure(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";

.data-container {
  height: 75vh;
  overflow: auto;
}

.showData {
  background: #fff;
  border-radius: 10px;
  margin-top: 5px;
  padding: 10px;

  .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: #9F643A;
      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%;
    margin-bottom: 20px;
  }

  .showList {
    width: 100%;

    ul {
      li {
        padding: 15px;
        border-bottom: 1px solid #dcdfe6;
      }

      li:hover {
        background: #dcdfe6;
        cursor: default;
      }

      .title {
        font-weight: bold;
        color: #9F643A;
        width: 90px;
      }

      .title1 {
        font-weight: bold;
        color: #000;
        margin-bottom: 20px;
        margin-top: 20px;
        font-size: 18px;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .data-container {
    height: 84vh;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .data-container {
    height: 84vh;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .data-container {
    height: 77vh;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .data-container {
    height: 77vh;
  }
}
</style>