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

<template>
  <div class="main-data data-share-station">
    <!-- <div class="title-area">共享驿站</div> -->
    <div class="content-area" v-if="flag >= 2">
      <div class="content-left">
        <div class="content-title">
          <div class="title">建设完成达标率</div>
        </div>
        <div class="content">
          <div class="data-content">
            <div class="data-left">
              <div class="data-item">
                <div class="data-fir">
                  <img src="@/assets/images/service_new/img_1.png" class="icon" />
                  <div class="name">{{constructionQuantityNum.name}}</div>
                </div>
                <div class="data-snd">
                  <div class="num">{{constructionQuantityNum.value}}</div>
                  <div class="unit">个</div>
                </div>
              </div>
              <div class="data-item">
                <div class="data-fir">
                  <img src="@/assets/images/service_new/img_2.png" class="icon" />
                  <div class="name">{{completedNum.name}}</div>
                </div>
                <div class="data-snd">
                  <div class="num">{{completedNum.value}}</div>
                  <div class="unit">个</div>
                </div>
              </div>
            </div>
            <div class="data-right">
              <div class="circle">
                <div class="value">
                  <div>{{parseFloat(participateProportionRate.value).toFixed(0)}}</div>
                  <div class="unit">%</div>
                </div>
                 <div class="revo">
                      <div class="name">完成</div>
                      <div class="name">达标率</div>
                     </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-title">
          <div class="title">服务内容</div>
        </div>
        <div class="content">
          <div class="data-content">
                <div class="data-left">
                  <div class="data-item">
                    <div class="data-fir">
                      <img src="@/assets/images/service_new/img_1.png" class="icon" />
                      <div class="name">{{serviceContent[0].name}}</div>
                    </div>
                    <div class="data-snd">
                      <div class="num">{{serviceContent[0].value}}</div>
                      <div class="unit">个</div>
                    </div>
                  </div>
                  <div class="data-item">
                    <div class="data-fir">
                      <img src="@/assets/images/service_new/img_1.png" class="icon" />
                      <div class="name">{{serviceContent[1].name}}</div>
                    </div>
                    <div class="data-snd">
                      <div class="num">{{serviceContent[1].value}}</div>
                      <div class="unit">个</div>
                    </div>
                  </div>
                </div>
                <div class="data-right">
                    <pie-chart
                    position="left"
                  :chart-data="fwData"
                  :legend="fwLegend"
                  :center="['40%','45%']"
                  width="120px"
                  height="160px"
                />


                </div>
              </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getOverviewData,getSelfTestAndConsultation} from "@/api/screen/service";
import PieChart from "@/components/Echarts/PieChart.vue";


export default {
  name: "ShareStation",
  components: {PieChart},
  props: {
    appOrg: {
      type: String,
      default: "0000",
    },
  },
  watch:{
    appOrg(newValue,oldValue){
      //建设完成率
    // this.getOverviewData();
    // //工具箱二具数量
    // this.getToolsChartsList();
    },
  },
  data() {
    return {
      flag: 0,
      pieData: [],
      pieLegend: {
        top: 50,
        orient: "vertical",
        right: 0,
        itemWidth: 8, // 设置图例标记的宽度
        itemHeight: 8, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },
      },
      pieTitle: {},
      constructionQuantityNum: {name: '', value: 0},
        // 服务内容
      serviceContent :{},
      completedNum: {},
      participateProportionRate: {
        name: '',
        value:0
      },
      fwData: [],
      fwLegend: {
        top: 115,
        orient: "vertical",
        left: 10,
        itemWidth: 10, // 设置图例标记的宽度
        itemHeight: 10, // 设置图例标记的高度
        textStyle: {
          color: "#FFF",
        },

      },
    };
  },
  created() {
    //建设完成率
    this.getOverviewData();
    // 服务内容
    this.getSelfTestAndConsultation()
  },
  destroyed() {},
  beforeDestroy() {},
  mounted() {},
  methods: {
    //建设完成率
    getOverviewData() {
      getOverviewData(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.constructionQuantityNum = res.data.constructionQuantityNum;
          this.completedNum = res.data.completedNum;
          this.participateProportionRate = res.data.participateProportionRate;
          this.flag++
        }
      });
    },
        // 服务内容
        getSelfTestAndConsultation(){
      getSelfTestAndConsultation(this.$props.appOrg).then((res) => {
        if (Number(res.code) === 200) {
          this.serviceContent = res.data;
          this.fwData = res.data;
          this.flag++
        }
      });
    },
    // //工具箱二具数量
    // getToolsChartsList() {
    //   getToolsChartsList(this.$props.appOrg).then((res) => {
    //     if (Number(res.code) === 200) {
    //       this.pieData = res.data;
    //     }
    //   });
    // },
  },
};
</script>

<style lang="scss">
.data-share-station {
  overflow: hidden;

  .content-area {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 15px 20px 0 15px;

    .content-left, .content-right{
      width:calc(50% - 20px);
    }
  }

  .content-title {
    width: 230px;
    height: 26px;
    background: url("../../../assets/images/main/title_pro.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: 20px;

    .data-content{
      display: flex;
      justify-content: space-between;
      // padding-top:10px;

      .mar{
        margin-bottom: 15px;
      }
      .data-left{
        width: auto;

        .data-item{
          width:auto;
          margin-bottom: 23px;

          .data-fir{
            display: flex;
            align-items: center;

            .icon{
              width: 15px;
              height: 15px;
              margin-right: 6px;
            }
            .name{
              font-size: 14px;
              color:#FFFFFF;
            }
          }
          .data-snd{
            display: flex;
            align-items: center;
            padding-top:2px;

            .num{
              font-size: 32px;
              color:#00FFFF;
              font-family: 'electronicFont';
            }
            .unit{
              font-size:12px;
              color:#00FFFF;
              font-weight: 500;
              position: relative;
              top:5px;
              left:2px;
            }
          }
        }
      }
      .data-right{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -50px;
        .name{
          font-size:13px;
          color:#fff;
        }
        .circle{
          width: 100px;
          height:100px;
          background: url("../../../assets/images/service_new/circle_2.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-around;
        align-items:center;
        flex-direction: column;
          .revo{
          display: flex;
          flex-direction: column;
          align-items: center;
        }
          .value{
            display: flex;
            align-items: center;
            font-size: 32px;
            color:#00FFFF;
            font-family: 'electronicFont';
            position: relative;
            top:15px;
          }
          .unit{
            font-size:12px;
            color:#00FFFF;
            font-weight: 500;
            position: relative;
            top:5px;
            left:2px;
          }
        }
      }
    }
  }
  .data-content{
      display: flex;
       justify-content:space-around;
      align-items: center;
      overflow: visible;
      padding:10px 0px 0px 0px;
      margin-left: 10px;
      .imgPos{
        padding-left: 15px;
        padding-right: 15px;
      }
 }
  ::-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>