large-vue/src/views/screen/service/employeeHealth.vue

<template>
  <div class="main-data data-employee-health">
    <!-- <div class="title-area">员工健康</div> -->
    <div class="content-area">
      <div class="content-title">
        <span class="title">健康服务</span>
      </div>
      <div class="content">
        <div class="health-cont">
          <div class="health-left">
            <div class="left-list">
              <img src="@/assets/images/service_new/person2.png">
              <div class="left-info">
                <div class="num">{{participateNum.value}}<span class="unit">人</span></div>
                <div class="name">{{participateNum.name}}</div>
              </div>
            </div>
            <div class="left-list">
              <img src="@/assets/images/service_new/person.png">
              <div class="left-info">
                <div class="num">{{actualParticipateNum.value}}<span class="unit">人</span></div>
                <div class="name">{{actualParticipateNum.name}}</div>
              </div>
            </div>          
          </div>
          <div class="health-right">
            <el-progress
              type="circle"
              :width="112"
              :stroke-width="8"
              :percentage="participateProportionRate.value"   
              color="#00FFFF"
              style="color:rgba(0, 247, 255, 0.18);"
            ></el-progress>
            <div class="name">检查人数占比</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PieChart from "@/components/Echarts/PieChart";
import BarChart from "@/components/Echarts/BarChart";
import {getAgePieData, getHealthData, getSexChartData} from "@/api/screen/service";

export default {
  name: "EmployeeHealth",
  components: {
    PieChart,
    BarChart,
  },
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      this.getHealthData();
    },
  },
  data() {
    return {
      actualParticipateNum: {},
      participateNum: {},
      participateProportionRate: {},
    };
  },
  created() {
    // 健康服务
    this.getHealthData();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {

    //健康服务
    getHealthData() {
      getHealthData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.actualParticipateNum = res.data.actualParticipateNum;
          this.participateNum = res.data.participateNum;
          this.participateProportionRate = res.data.participateProportionRate;
        } else {

        }
      });
    },

    showContent(percent){
      return percent;
    }
  },
};
</script>

<style lang="scss">
.data-employee-health {
  .content-area {
    padding: 15px 20px 0 15px;
  }

  .el-progress--circle .el-progress__text, .el-progress--dashboard .el-progress__text{
    color: #FFFFFF !important;
    font-family: "fashionZh" !important;
    font-size: 20px !important;
  }

  .content-title {
    width: 100%;
    height: 26px;
    background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
    background-size: 100% 100%;
    font-family: "PingFangSC";
    font-size: 16px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 25px;
    .title {
      display: block;
      position: relative;
      top:-5px;
    }
  }

  .content {
    margin-top: 15px;
  }

  .health-cont{
    width:100%;
    display: flex;
    justify-content: space-between;
    padding: 0 80px 0 30px;

    .health-left{
      padding-right:100px;

      .left-list{
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        img{
          display: block;
          width:60px;
          height:60px;
        }
        .left-info{
          padding-left:12px;

          .num{
            font-size: 25px;
            color:#00FFFF;
            font-family: "electronicFont";
            display: flex;
            flex-direction: row;
            align-items: baseline;
            .unit{
              font-size: 12px;
            }
          }
          .name{
            font-size: 14px;
            color:#FFFFFF;
            font-family: 'fashionZh';
            padding-top:4px;
          }
        }
      }
    }
    .health-right{
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 2px;
      align-items: center;

      .name{
        //width:75px;
        font-size: 14px;
        color:#FFFFFF;
        font-family: 'fashionZh';
        padding-top:10px;
        text-align: center;
      }
    }
  }
  .el-progress-circle__track {
    color: #FFFFFF;
    opacity: 0.1;
    }

  
  ::v-deep .el-progress__text {
    color: #ffffff !important;
  }

  ::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }

  ::-webkit-scrollbar-thumb {
    //滑块部分
    // border-radius: 5px;
    background-color: #58cbbb;
  }

  ::-webkit-scrollbar-track {
    //轨道部分
    // box-shadow: inset 0 0 5px #ddd;
    background: #ddd;
    // border-radius: 5px;
  }
  
}
</style>