datang-meeting/acupuncture-前台/src/views/indexCom/JM.vue

<template>
  <div class="app-container">
    <!-- 静脉溶栓 数据对比 -->
    <div class="dis" style="width: 100%">
      <div style="flex: 1">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">静脉溶栓率 </span>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="JMz" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="flex: 1; margin-left: 20px">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">数据对比</span>
            <div class="dis">
              <div class="dian-box dis">
                <span class="dian" style="background: #00d1a1"></span>
                静脉溶栓人数
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #4f8bff"></span>
                急救特征人数
              </div>
            </div>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="JMy" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- DNT分布  sICH发生率  -->
    <div class="dis" style="width: 100%">
      <div style="flex: 1">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">DNT分布 </span>
            <div class="dis">
              <div class="dian-box dis">
                <span class="dian" style="background: #ffcd6c"></span> ≤45 min
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #f97186"></span> ≤60 min
              </div>
              <div class="dian-box dis">
                <span class="dian" style="background: #4f8bff"></span> >60 min
              </div>
            </div>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="DNT" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
      <div style="flex: 1; margin-left: 20px">
        <el-card shadow="always">
          <div class="dis title-box">
            <span class="header-title">sICH发生率</span>
          </div>
          <!-- 统计图 -->
          <div style="height: 300px" v-loading="loading">
            <div id="sICH" style="width: 100%"></div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "@/views/dashboard/mixins/resize";
import { queryDntResult, querySichResult, queryJmrs } from "@/api/indexCom.js";
import { JMRSL, JMSJDB, DNT, SICH } from "./index";
export default {
  name: "Post",
  props: ["title"],
  mixins: [resize],
  data() {
    return {
      loading: false,
      JMRSLvalue: null,
      DNTvalue: null,
      SICHvalue: null,
      // 查询参数
      queryParams: {
        param: {
          timeType: 4,
          startTime: "",
          endTime: "",
        },
      },
    };
  },
  created() {
    // this.getData();
  },
  methods: {
    statistics(_data, _type) {
      this.initial(_data, _type); // 处理数据
      this.loading = true;
      this.getData(); // 获取数据
    },
    // 查询
    async getData() {
      try {
        //RSL 静脉溶栓率
        await queryJmrs(this.queryParams).then((res) => {
          this.JMRSLvalue = res.data;
          console.log("this.JMRSLvalue: ", this.JMRSLvalue);
          this.columnar();
        });
        //DNT
        await queryDntResult(this.queryParams).then((res) => {
          this.DNTvalue = res.data;
          console.log("this.DNTvalue: ", this.DNTvalue);
          this.lineDNT();
        });
        // //数据对比
        await querySichResult(this.queryParams).then((res) => {
          this.SICHvalue = res.data;
          this.LineSICH();
        });

        this.LineJM();
        this.columnar();
        this.lineDNT();
        this.LineSICH();
        this.loading = false;
      } catch (e) {}
    },
    // 静脉溶栓率` 数据对比
    LineJM() {
      JMSJDB.series[0].data = this.JMRSLvalue?.map((item) => {
        return item.gailv;
      });
      JMSJDB.series[1].data = this.JMRSLvalue?.map((item) => {
        return item.total;
      });
      JMSJDB.xAxis[0].data = this.JMRSLvalue?.map((item) => {
        return item.date; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("JMy"), null, {
          height: 300,
        });
        myChart.setOption(JMSJDB, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    // 静脉溶栓率
    columnar() {
      JMRSL.series[0].data = this.JMRSLvalue?.map((item) => {
        return item.decimal;
      });
      JMRSL.xAxis.data = this.JMRSLvalue?.map((item) => {
        return item.date;
      });
      JMRSL.series[0].data = this.JMRSLvalue?.map((item) => {
        return item.decimal;
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("JMz"), null, {
          height: 300,
        });
        myChart.setOption(JMRSL, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    lineDNT() {
      DNT.series[0].data = this.DNTvalue?.map((item) => {
        return item.dy45; //≤45
      });
      DNT.series[1].data = this.DNTvalue?.map((item) => {
        return item.dy60; //≤60
      });
      DNT.series[2].data = this.DNTvalue?.map((item) => {
        return item.other; //>60
      });
      DNT.xAxis.data = this.DNTvalue?.map((item) => {
        return item.date; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("DNT"), null, {
          height: 300,
        });
        myChart.setOption(DNT, true);
        myChart.resize();
        window.onresize = myChart.resize;
      });
    },
    LineSICH() {
      SICH.series[0].data = this.SICHvalue?.map((item) => {
        return item.decimal; //≤45
      });
      SICH.xAxis[0].data = this.SICHvalue?.map((item) => {
        return item.time; //X轴
      });
      this.$nextTick(() => {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("sICH"), null, {
          height: 300,
        });
        myChart.setOption(SICH, 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 = {
        timeType: _type,
        startTime: _data[0] + " " + "00:00:00",
        endTime: _data[1] + " " + "23:59:59",
      };
    },
    // 重新渲染图标
    getRenew() {
      this.LineJM();
      this.columnar();
      this.lineDNT();
      this.LineSICH();
    },
  },
};
</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;
}
.title1 {
  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>