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

<template>
  <div class="main-data data-basic-operation">
    <!-- <div class="title-area">基础运行数据</div> -->
    <div class="content-area">
      <div class="content-title">
        <span class="title">智能后勤APP用户使用情况数据</span>
      </div>
      <div class="content">
        <div class="data-list">
          <div v-for="(item, index) in dataList" :key="index" class="data-item">
            <div class="data-fir">
              <img src="@/assets/images/service_new/img_1.png" class="icon" />
              <div class="name">{{item.name}}</div>
            </div>
            <div class="data-snd">
              <div class="num">{{item.data}}</div>
              <div class="unit">人</div>
            </div>
          </div>

          <div class="rate-item">
            <el-progress
              type="circle"
              :width="80"
              :stroke-width="5"
              :percentage=onlineRate
              color="#00FFFF"
              style="color:rgba(0, 247, 255, 0.18);"
            ></el-progress>
            <div class="name">人数在线率</div>
          </div>
        </div>
      </div>

      <div class="content-title mar">
        <span class="title">活跃率TOP10公司</span>
      </div>
    </div>
  </div>
</template>

<script>

import { getBasicOverviewData } from "@/api/screen/service";

export default {
  name: "BasicOperation",
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      this.getBasicOverviewData();
    },
  },
  data() {
    return {
      dataList: [],
      onlineRate: 0,
    };
  },
  created() {
    //数据概况
    this.getBasicOverviewData();
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {

    //获取数据概况
    getBasicOverviewData() {
      this.dataList = [];
      getBasicOverviewData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.dataList.push(
            {
              name: res.data.registerNum.name,
              data: res.data.registerNum.value,
            }
          )
          this.dataList.push(
            {
              name: res.data.orderNum.name,
              data: res.data.orderNum.value,
            }
          )
          // console.log(dataList);
         this.onlineRate =res.data.onlineRate;
          //alert(this.onlineRate);
        }
      });
    },

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

<style lang="scss">
.data-basic-operation {

  .content-area {
    padding: 15px 20px 0 15px;
  }

  .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: 14px;
    font-weight: bold;
    color: #00ffff;
    padding-left: 25px;
    .title {
      display: block;
      position: relative;
      top:-5px;
    }
  }
  .mar{
    margin-top:35px;
  }

  .content{
    margin-top:20px;
  }
  .data-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start !important;
    width: 100%;


    .data-item{
      width:auto;
      border-right: 0 !important;
      padding-top: 10px;
      .data-fir{
        width:100%;
        display: flex;
        align-items: center;

        .icon{
          width: 15px;
          height: 15px;
          margin-right: 6px;
        }
        .name{
          font-size: 14px;
          color:#FFFFFF;
        }
      }
      .data-snd{
        width:100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .num{
          font-size: 30px;
          color:#00FFFF;
          font-family: 'electronicFont';
        }
        .unit{
          font-size:12px;
          color:#00FFFF;
          font-weight: 500;
          position: relative;
          top:3px;
          left:2px;
        }
      }
      .data-thd{
        font-size: 14px;
        color:#FFFFFF;
        padding-top:4px;
      }
    }
    .rate-item{
      display: flex;
      flex-direction: column;
      align-items: center;

      .name{
        font-size: 14px;
        color:#FFFFFF;
        padding-top:4px;
        font-family: "fashionZh" !important;
      }
    }
  }

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

  .el-progress-circle__track {
    color: #FFFFFF;
    opacity: 0.1;
    }

  ::-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;
  }

  .unit-label{
    color: rgba(255,255,255,0) !important;
  }
}
</style>