~admin/SGDSJZX.git

<template>
  <div class="evaluate">
    <div class="div1">
      <div class="title">
        <span>全民健康</span>
        <img src="../../../assets/img/zonlan (9).png" alt="" />
      </div>
      <div class="content1">
        <div class="content11">
          <table>
            <tr class="tr1">
              <td class="td1">
                <div>三级医院</div>
              </td>
              <td class="td1">
                <div>二级医院</div>
              </td>
              <td class="td1">
                <div>一级医院</div>
              </td>
            </tr>
            <tr class="tr2">
              <td class="td2">{{ hospitalNum.sj }}</td>
              <td class="td2">{{ hospitalNum.ej }}</td>
              <td class="td2">{{ hospitalNum.yj }}</td>
            </tr>
            <tr class="tr3">
              <td class="td3"></td>
              <td class="td3"></td>
              <td class="td3"></td>
            </tr>
 
            <tr class="tr4">
              <td class="td4">
                <div>乡镇卫生院</div>
              </td>
              <td class="td4">
                <div>卫生室</div>
              </td>
              <td class="td4">
                <div>计生站</div>
              </td>
            </tr>
            <tr class="tr5">
              <td class="td5">{{ hospitalNum.xz }}</td>
              <td class="td5">{{ hospitalNum.wss }}</td>
              <td class="td5">{{ hospitalNum.jsz }}</td>
            </tr>
            <tr class="tr6">
              <td class="td6"></td>
              <td class="td6"></td>
              <td class="td6"></td>
            </tr>
          </table>
        </div>
 
        <div class="content12">
          <table>
            <tr class="tr21">
              <td colspan="2">互联网+服务库</td>
            </tr>
            <tr class="tr22">
              <td>
                <div class="dtr">
                  注册人数：<span>{{ sjjhNum.registerNum }}</span
                  >人
                </div>
              </td>
              <td>
                <div class="dtr">
                  其中App注册数：<span>{{ sjjhNum.appuser }}</span
                  >人
                </div>
              </td>
            </tr>
            <tr class="tr23">
              <td>
                <div class="dtr">
                  实名认证数：<span>{{ sjjhNum.certification }}</span
                  >人
                </div>
              </td>
              <td>
                <div class="dtr">
                  微信绑定数：<span>{{ sjjhNum.wxuser }}</span
                  >人
                </div>
              </td>
            </tr>
            <tr class="tr24">
              <td>
                <div class="dtr">
                  计生关系网上办理数：<span>{{ sjjhNum.jsrelation }}</span
                  >人
                </div>
              </td>
            </tr>
            <tr class="tr25">
              <td>
                <div class="dtr">
                  一孩子生育网上办理数：<span>{{ sjjhNum.firstchild }}</span
                  >人
                </div>
              </td>
              <td>
                <div class="dtr">
                  二孩子生育网上办理数：<span>{{ sjjhNum.secondchild }}</span
                  >人
                </div>
              </td>
            </tr>
            <tr class="tr26">
              <td>
                <div class="dtr">
                  健康档案调阅次数：<span>{{ sjjhNum.healthTimes }}</span
                  >人
                </div>
              </td>
              <td>
                <div class="dtr">
                  就诊信息调阅次数：<span>{{ sjjhNum.doctorTimes }}</span
                  >人
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="div2">
      <div class="title">
        <span>新冠疫苗</span>
        <img src="../../../assets/img/zonlan (9).png" alt="" />
      </div>
      <div class="content2">
        <div id="content21"></div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dataX1: [],
      dataY1: [],
      leftoption: {},
      hospitalNum: {},
      sjjhNum: {},
    };
  },
  //方法集合
  methods: {
    async getData() {
      const { data: dt } = await this.$http.get(
        "/jeecg-boot/hospital_num/hospitalNum/queryall"
      );
      const { data: dt1 } = await this.$http.get(
        "/jeecg-boot/sjjh_num/sjjhNum/queryall"
      );
      this.hospitalNum = dt.result[0];
      this.sjjhNum = dt1.result[0];
    },
    //获取数据
    async drawLine() {
      const { data: dt } = await this.$http.get(
        "/jeecg-boot/xgymjzdj/xgymjzdj/queryall"
      );
      this.GetChartDataLeft1(dt.result);
    },
 
    //左一饼图
    GetChartDataLeft1(val) {
      //数据赋值
      this.dataX1 = [];
      this.dataY1 = [];
      val.forEach((element) => {
        this.dataX1.push(element.hospital);
        this.dataY1.push(element.times);
      });
      // 基于准备好的dom，初始化echarts实例
      let leftChart = this.$echarts.init(document.getElementById("content21"));
 
      var colors = [
        "#A1232E",
        "#819335",
        "#F5AD1D",
        "#C16B2B",
        "#236771",
        "#CE6F56",
        "#83AF5D",
        "#CEB759",
        "#CA8E3D",
        "#03AAD6",
        "#AE4746",
        "#A6C56E",
        "#C8BF0C",
        "#C77053",
        "#22A4A8",
      ];
      this.leftoption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "7%",
          right: "4%",
          bottom: "4%",
          top: "16%",
          containLabel: true,
        },
        legend: {
          data: ["接种次数"],
          left: "center",
          top: 12,
          show: false,
          itemStyle: {
            color: "#0497C4",
          },
          textStyle: {
            fontSize: 30,
            color: "#fff",
          },
          itemWidth: 50,
          itemHeight: 35,
        },
        xAxis: {
          type: "category",
          data: this.dataX1,
          axisLine: {
            lineStyle: {
              color: "#034D8E",
            },
          },
          axisLabel: {
            rotate: 40,
            textStyle: {
              color: "#FFF",
              fontFamily: "Microsoft YaHei",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#034D8E",
            },
          },
        },
 
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#FFF",
              fontFamily: "Microsoft YaHei",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#034D8E",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#034D8E",
            },
          },
        },
        dataZoom: [
          {
            backgroundColor: "#063B63",
            show: true,
            height: 12,
            top: "10%",
            start: 0,
            end: 100,
            textStyle: {
              color: "#fff",
            },
            borderColor: "#045B8D",
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#0370AC",
            },
          },
        ],
        series: [
          {
            name: "接种次数",
            type: "bar",
            barWidth: "50%",
            itemStyle: {
              color: function (params) {
                //通过返回值的下标一一对应将颜色赋给柱子上
                var pindex = params.dataIndex % 15;
 
                return colors[pindex];
              },
            },
            data: this.dataY1,
          },
        ],
      };
 
      // 绘制图表
      leftChart.setOption(this.leftoption);
    },
  },
  mounted() {
    this.drawLine();
  },
  created() {
    this.getData();
  },
};
</script>
 
<style lang="less" scoped="scoped">
.evaluate {
  height: 50%;
  width: 100%;
  display: flex;
  flex-direction: row;
  background: rgba(8, 32, 58, 0.7);
  .title {
    width: 100%;
    position: relative;
 
    img {
      width: 100%;
    }
 
    span {
      font-size: 78px;
      font-weight: 400;
      color: #ffe86b;
      background: linear-gradient(0deg, #bce7ff 0%, #69efff 98.6572265625%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }
}
.div1,
.div2 {
  height: 90%;
  width: 50%;
}
.content1,
.content2 {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}
 
.content11,
.content12 {
  height: 100%;
  width: 50%;
}
 
table {
  height: 100%;
  width: 100%;
  color: #fff;
  text-align: center;
}
 
.tr1,
.tr4 {
  height: 10%;
}
 
.td1,
.td4 {
  width: 33%;
}
 
.td1 div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  width: 100%;
  background-image: url(../../../assets/img/医院标题.png);
  background-size: 100% 100%;
  font-size: 39px;
}
 
.td4 div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
  width: 100%;
  background-image: url(../../../assets/img/医院标题.png);
  background-size: 100% 100%;
  font-size: 39px;
}
 
.tr2,
.tr5 {
  height: 10%;
}
 
.td2,
.td5 {
  font-size: 76px;
  font-weight: bold;
  color: #fdbf46;
  background: linear-gradient(0deg, #faff67 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
.tr3,
.tr6 {
  height: 20%;
}
 
.td3,
.td6 {
  background-image: url(../../../assets/img/医院.png);
  background-size: 100% 100%;
}
 
.content12 table {
  height: 100%;
  width: 100%;
  color: #ffffff;
}
 
.content12 table tr {
  height: 16.5%;
}
 
.tr21 td {
  height: 10%;
  font-size: 70px;
}
 
.tr22 td {
  height: 15%;
}
 
.tr23 td {
  height: 15%;
}
 
.tr24 td {
  height: 15%;
}
 
.tr25 td {
  height: 15%;
}
 
.tr26 td {
  height: 15%;
}
 
.dtr {
  width: 530px;
  height: 76px;
  background-image: url(../../../assets/img/huFu.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  font-size: 24px;
  text-indent: 80px;
}
 
.dtr span {
  text-indent: 0px;
  color: orange;
}
 
#content21 {
  height: 100%;
  width: 100%;
}
@media only screen and (max-width: 2560px) {
  .evaluate {
    height: 100%;
    overflow: visible;
    flex-direction: column;
    background: transparent;
    .div1,
    .div2 {
      height: 54%;
      width: 100%;
      .content1 {
        height: 8000px;
        flex-direction: column;
        .content11 {
          height: 20%;
          width: 100%;
        }
        .content12 {
          height: 20%;
          width: 100%;
        }
      }
 
      .dtr {
        justify-content: center;
        width: 90%;
        height: 80%;
      }
    }
    #content21 {
      height: 2400px;
      width: 100%;
    }
  }
}
</style>