acupuncture/acupuncture-后台/src/views/indexCom/follow.vue

<template>
  <div>
    <div class="app-container">
      <div class="dis" style="width: 100%">
        <div style="flex: 1; margin-right: 20px">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">随访队列分布</span>
              <div class="dis"></div>
            </div>
            <!-- 患者总数统计图 -->
            <div style="height: 300px" v-loading="loading">
              <div id="follow" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
        <div style="flex: 1">
          <el-card shadow="always">
            <div class="dis title-box">
              <span class="header-title">失访原因分布</span>
              <div class="dis"></div>
            </div>
            <!-- 患者总数统计图 -->
            <div style="height: 300px" v-loading="loading">
              <div id="lossFollow" style="width: 100%"></div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { sffb, sftj } from "@/api/indexCom.js";
import { followEcharts, lossFollowEcharts } from "./index";
export default {
  name: "Post",
  props: ["title"],
  mixins: [resize],
  data() {
    return {
      loading: false,
      followValue: [], //
      lossFollowValue: [], //
      queryParams: {
        param: {
          startTime: "",
          endTime: "",
        },
      },
    };
  },
  created() {
    // this.Linepatient()
    this.getData();
  },
  methods: {
    statistics(_data, _type) {
      this.initial(_data, _type); // 处理数据
      this.loading = true;
      this.getData(); // 获取数据
    },
    //患者信息
    async getData() {
      try {
        this.followValue = {};
        await sffb(this.queryParams).then((res) => {
          res.data.forEach((i) => {
            let data = [i.dsf, i.ljsf, i.cqsf, i.zc];
            this.followValue[i.queueName] = data;
          });
          this.handleFollow();
        });
        await sftj(this.queryParams).then((res) => {
          this.lossFollowValue = res.data;
          this.handleLossFollow();
        });
        this.loading = false;
      } catch (e) {
        console.log("随访", e);
      }
    },

    // 队列
    handleFollow() {
      followEcharts.series = [];
      let colorArr = [
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
        "#C7BDB1",
        "#C6A268",
        "#906C4A",
        "#70483E",
        "#582518",
      ];
      let index = 0;
      for (let key in this.followValue) {
        let series = {
          name: key,
          data: this.followValue[key],
          type: "bar",
          barMaxWidth: 24, //柱图宽度
          color: colorArr[index],
        };
        followEcharts.series.push(series);
        index++;
      }
      this.$nextTick(() => {
        var myChart = echarts.init(document.getElementById("follow"), null, {
          height: 300,
        });
        myChart.setOption(followEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 失访
    handleLossFollow() {
      lossFollowEcharts.series[0].data = this.lossFollowValue?.map((item) => {
        return item.num;
      });
      lossFollowEcharts.xAxis.data = this.lossFollowValue?.map((item) => {
        return item.reason;
      });
      this.$nextTick(() => {
        var myChart = echarts.init(
          document.getElementById("lossFollow"),
          null,
          {
            height: 300,
          }
        );
        myChart.setOption(lossFollowEcharts, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 数据处理 查询类型判断参数
    initial(_data, _type) {
      _data[0] = this.$moment(_data[0]).format("YYYY-MM-DD");
      _data[1] = this.$moment(_data[1]).format("YYYY-MM-DD");
      this.queryParams.param = {
        startTime: _data[0] + " " + "00:00:00",
        endTime: _data[1] + " " + "23:59:59",
      };
    },
    // 重新渲染图标
    getRenew() {
      this.handleFollow();
      this.handleLossFollow();
    },
  },
};
</script>
<style scoped src="@/assets/styles/common.css"></style>
<style scoped>
>>> .el-card__body {
  padding: 10px 0 !important;
}

.dis {
  display: flex;
}

.header-title {
  font-size: 18px;
}

.title-box {
  padding: 10px 20px;
  border-bottom: 1px solid #dfe6ec;
}

.dian-box {
  align-items: center;
}

.dian {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 10px;
}

.title-box {
  justify-content: space-between;
}

. >>> .el-radio--small.is-bordered {
  margin-right: 20px !important;
  margin-left: 0 !important;
}

>>> .el-radio__input {
  display: none;
}

>>> .el-radio__label {
  padding-left: 5px;
}

.app-container {
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.title {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 600;
}

.title-bor {
  display: inline-block;
  height: 20px;
  width: 6px;
  background: #4f8bff;
  margin-right: 10px;
  border-radius: 8px;
}
</style>