cga_v2/web_admin/src/views/index.vue

<template>
  <div class="big-screen-container">
    <div class="header">老年病标准化综合诊断大数据中心</div>
    <div class="echarts">
      <div class="echarts-left">
        <div class="echarts-item-box">
          <h3 class="section-title">综合数据概览</h3>
          <div class="synthesize-box">
            <div class="synthesize">
              <div class="synthesize-item">
                <p>总评估人次</p>
                <p>{{ nntotalList.asstotal || "0" }}人</p>
              </div>
              <div class="synthesize-item">
                <p>患者总人数</p>
                <p>{{ nntotalList.ptotal || "0" }}人</p>
              </div>
              <div class="synthesize-item">
                <p>男性患者</p>
                <p>{{ nntotalList.mtotal || "0" }}人</p>
              </div>
              <div class="synthesize-item">
                <p>女性患者</p>
                <p>{{ nntotalList.ftotal || "0" }}人</p>
              </div>
            </div>

            <div class="synthesize" :gutter="20">
              <div class="synthesize-item">
                <p>筛查2项阳性</p>
                <p>{{ nntotalList.v1total || "0" }}人</p>
              </div>
              <div class="synthesize-item">
                <p>医生端评估</p>
                <p>{{ nntotalList.v2total || "0" }}人</p>
              </div>
              <div class="synthesize-item">
                <p>护理端评估</p>
                <p>{{ nntotalList.v3total || "0" }}人</p>
              </div>
              <div class="synthesize-item">
                <p>防治计划</p>
                <p>{{ nntotalList.plantotal || "0" }}人</p>
              </div>
            </div>
          </div>
        </div>
        <div class="echarts-item-box">
          <h3 class="section-title">BMI/吸烟喝酒占比</h3>
          <div class="item-box-BMI">
            <div class="box-BMI-left">
              <div
                ref="unitDistribution"
                style="width: 100%; height: 100%"
              ></div>
            </div>
            <div class="box-BMI-right">
              <div ref="smokingbution" style="width: 100%; height: 100%"></div>
            </div>
          </div>
        </div>
        <div
          class="echarts-item-box"
          style="min-height: 300px; max-height: 300px"
        >
          <h3 class="section-title">最新评估情况</h3>
          <div class="latest-evaluation">
            <div class="latest-evaluation-header">
              <div style="flex: 1.5">患者姓名</div>
              <div>评估时间</div>
              <div style="flex: 1.5">评估人</div>
            </div>
            <div class="latest-evaluation-content" style="max-height: 220px">
              <div
                class="evaluation-content-item latest-evaluation-header"
                v-for="(item, index) in nnlastList.slice(0, 10)"
                :key="index"
              >
                <div style="flex: 1.5">{{ item.name_m }}</div>
                <div>{{ item.update_time }}</div>
                <div style="flex: 1.5">{{ item.create_by }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="echarts-center">
        <div class="echarts-item-box" style="flex: 2; padding-bottom: 16px">
          <!-- echarts 河南省地图 -->
          <div ref="mapChart" style="width: 100%; height: 100%"></div>
        </div>
        <div
          class="echarts-item-box"
          style="min-height: 300px; max-height: 300px"
        >
          <h3 class="section-title">评估结果统计</h3>
          <div ref="scaleTypebution" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="echarts-right">
        <div class="echarts-item-box">
          <h3 class="section-title">年龄分布</h3>
          <div class="item-box-BMI">
            <div ref="agebution" style="width: 100%; height: 100%"></div>
          </div>
        </div>
        <div class="echarts-item-box">
          <h3 class="section-title">T值分析/多重用药人数占比</h3>
          <div class="item-box-BMI">
            <div class="box-BMI-left">
              <div ref="TValuebution" style="width: 100%; height: 100%"></div>
            </div>
            <div class="box-BMI-right">
              <div
                ref="comorbiditybution"
                style="width: 100%; height: 100%"
              ></div>
            </div>
          </div>
        </div>
        <div
          class="echarts-item-box"
          style="min-height: 300px; max-height: 300px"
        >
          <h3 class="section-title">疾病排行分析</h3>
          <div class="latest-evaluation">
            <div class="latest-evaluation-content" style="max-height: 252px">
              <div
                class="evaluation-content-item evaluation-content-item1 latest-evaluation-header"
                style="line-height: 40px"
                v-for="(item, index) in nnicdList.slice(0, 10)"
                :key="index"
              >
                <div style="flex: 1" class="content-item-name">
                  <span>No.{{ index + 1 }}</span> {{ item.name || "-" }}
                </div>
                <span>{{ item.value || 0 }}人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  BMI,
  smoking,
  age,
  TValue,
  comorbidity,
  scaleType,
  henanMap,
  // 接口
  nnicd,
  nntotal,
  nnbmihjxy,
  nnlast,
  nnage,
  nntgb,
  nnscale,
  nnmap,
} from "./index.js";
import shanxiMapData from "./河南省.json";
export default {
  name: "NanningBigScreen",
  data() {
    return {
      bmiChart: null,
      smokingChart: null,
      ageChart: null,
      TValueChart: null,
      comorbidityChart: null,
      scaleTypeChart: null,
      henanMapchart: null,
      nntotalList: {},
      nnlastList: [],
      nnicdList: [],
    };
  },
  mounted() {
    this.getProjressMemberList();
    echarts.registerMap("shanxi", shanxiMapData);
    this.initMapChart();
    this.getNnicd();
    // 窗口大小改变时重新调整图表大小
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    // 销毁图表实例
    if (this.charts) {
      this.charts.forEach((chart) => chart && chart.dispose());
    }
  },
  methods: {
    getNnicd() {
      // 综合数据概览
      nntotal().then((res) => {
        console.log(res);
        this.nntotalList = res.data;
      });
      // BMI/吸烟喝酒占比
      nnbmihjxy().then((res) => {
        console.log(res);
        this.bmiChart = echarts.init(this.$refs.unitDistribution, "macarons");
        BMI.series[0].data = [
          { name: "过轻", value: res.data.bmi1 },
          { name: "正常", value: res.data.bmi2 },
          { name: "超重", value: res.data.bmi3 },
          { name: "肥胖", value: res.data.bmi4 },
          { name: "非常肥胖", value: res.data.bmi5 },
        ];
        this.bmiChart.setOption(BMI);
        // 吸烟喝酒占比
        // this.projressMemberList = res.data;
        this.smokingChart = echarts.init(this.$refs.smokingbution, "macarons");
        smoking.series[0].data = [
          { name: "仅吸烟", value: res.data.onlysmoking },
          { name: "仅喝酒", value: res.data.onlydrink },
          { name: "吸烟喝酒", value: res.data.bothyes },
          { name: "习惯良好", value: res.data.bothno },
        ];
        this.smokingChart.setOption(smoking);
      });
      // 量表评估情况
      nnlast().then((res) => {
        this.nnlastList = res.data;
      });

      // 年龄分布
      nnage().then((res) => {
        this.ageChart = echarts.init(this.$refs.agebution, "macarons");
        age.series[0].data = [
          { name: "小于60岁", value: res.data.lt60 },
          {
            name: "60-69岁",
            value: res.data.f60t69,
          },
          { name: "70-79岁", value: res.data.f70t79 },
          {
            name: "80-89岁",
            value: res.data.f80t89,
          },
          { name: "大于90岁", value: res.data.f90t },
        ];
        this.ageChart.setOption(age);
      });
      // 多重用药人数占比
      nntgb().then((res) => {
        console.log(res);
        // T值分布
        this.TValueChart = echarts.init(this.$refs.TValuebution, "macarons");
        TValue.series[0].data = [
          { name: "骨质良好", value: res.data.t1 },
          {
            name: "骨质减少",
            value: res.data.t2,
          },
          { name: "骨质疏松", value: res.data.t3 },
        ];
        this.TValueChart.setOption(TValue);

        // 共病
        this.comorbidityChart = echarts.init(
          this.$refs.comorbiditybution,
          "macarons"
        );
        comorbidity.series[0].data = [res.data.gbratio || 0];
        this.comorbidityChart.setOption(comorbidity);
      });
      // 疾病
      nnicd().then((res) => {
        this.nnicdList = res.data;
      });

      // 评估结果统计
      nnscale().then((res) => {
        this.scaleTypeChart = echarts.init(
          this.$refs.scaleTypebution,
          "macarons"
        );
        // scaleType.xAxis[0].data = res.data.map((item) => item.name);
        // 正常
        // scaleType.series[0].data = res.data.map((item) => item.ntotal);
        // 异常
        // scaleType.series[1].data = res.data.map((item) => item.xtotal);
        // 评估人次
        // scaleType.series[2].data = res.data.map((item) => item.total);
        this.scaleTypeChart.setOption(scaleType);
      });

      nnmap().then((res) => {
        console.log(res);
        this.henanMapchart = echarts.init(this.$refs.mapChart, "macarons");
        henanMap.series[0].data.unshift({
          name: res.data[0].name,
          value: [res.data[0].longitude, res.data[0].latitude],
          num: this.nntotalList.asstotal,
        });
        this.henanMapchart.setOption(henanMap);
      });
    },

    // 初始化地图
    initMapChart() {
      if (!this.$refs.mapChart) return;
    },
    getProjressMemberList() {},
    // 处理窗口大小改变重新渲染图标
    handleResize() {
      console.log("窗口大小改变");
      this.henanMapchart.resize();
      // this.bmiChart.resize();
      // this.smokingChart.resize();
      // this.ageChart.resize();
      // this.TValueChart.resize();
      // this.comorbidityChart.resize();
      this.scaleTypeChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  background: url(./screen_title_bg.e1346b8e.png);
  background-size: 100% 100%;
  height: 90px;
  flex-shrink: 0;
  text-align: center;
  line-height: 80px;
  font-weight: bold;
  color: #fff;
  font-size: 40px;
}
.big-screen-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url(./bg.png);
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // padding: 16px;
}
.echarts {
  flex: 1;
  display: flex;
  padding: 0 16px;
  .echarts-left,
  .echarts-right {
    min-width: 450px;
    width: 450px;
    display: flex;
    flex-direction: column;
  }
  .echarts-center {
    flex: 1;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    margin: 0 16px;
  }
  .echarts-item-box {
    flex: 1;
    margin-bottom: 16px;
    // background-color: pink;
    box-shadow: rgb(29, 72, 196) 0px 0px 25px 3px inset;
    color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    // padding: 16px;
    box-sizing: border-box;
    .section-title {
      padding-left: 50px;
      background: url(./boxbgt3-231f2652.png);
      line-height: 40px;
      background-repeat: no-repeat;
      margin: 0;
      // background: skyblue;
    }
    // 最新评估情况
    .latest-evaluation {
      flex: 1;
      display: flex;
      flex-direction: column;
      .latest-evaluation-header {
        display: flex;
        background: #076ca8;
        color: #fff;
        font-size: 16px;
        line-height: 40px;
        div {
          padding: 0 10px;
          flex: 2;
        }
      }
      .latest-evaluation-content {
        flex: 1;

        overflow: auto;
        // background: skyblue;
        .evaluation-content-item {
          line-height: 60px;
          background: rgba(0, 0, 0, 0);
        }
        .evaluation-content-item:nth-child(even) {
          background: #062b50;
        }
        .evaluation-content-item1 {
          margin: 0 10px;
          div {
            padding: 0;
          }
          .content-item-name {
            span {
              color: #29b3aa;
            }
          }
          border-bottom: 1px solid #29b3aa;
        }
        .evaluation-content-item:last-child {
          border: none;
        }
      }
      // 隐藏滚动条
      .latest-evaluation-content::-webkit-scrollbar {
        display: none;
      }
    }

    // BMI/吸烟喝酒占比
    .item-box-BMI {
      flex: 1;
      display: flex;
      margin: 16px;
      .box-BMI-left,
      .box-BMI-right {
        height: 100%;
      }
      .box-BMI-left {
        flex: 1;
        margin-right: 14px;
      }
      .box-BMI-right {
        flex: 1;
      }
    }
    // 综合数据概览
    .el-row {
      flex: 1;
      .el-col-6 {
        height: 100%;
      }
    }
    .synthesize-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin: 0 10px 5px 10px;
    }
    .synthesize {
      flex: 1;
      display: flex;
      .synthesize-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;
        background: rgba(0, 0, 0, 0.2);
        margin: 4px;

        p {
          margin: 0;
          font-size: 16px;
        }
        p:nth-of-type(1) {
          color: #29b3aa;
        }
        p:nth-of-type(2) {
          line-height: 24px;
        }
      }
    }
  }
}
</style>