epmet-work-pc-chengyang/src/views/dataBoard/renfang/cpts/fwgl.vue

<template>
  <div>
    <div class="fwgl-main">
      <div class="g-pie">
        <div class="pie-left">
          <screen-echarts-frame class=""
                                @myChartMethod="pieInitOk"
                                ref="pieChart"></screen-echarts-frame>
        </div>
        <div class="pie-legend">
          <div class="item">
            <div class="item-logo logo1"></div>
            <div class="item-name">自住房屋</div>
          </div>
          <div class="item">
            <div class="item-logo logo2"></div>
            <div class="item-name">出租房屋</div>
          </div>
          <div class="item">
            <div class="item-logo logo3"></div>
            <div class="item-name">闲置房屋</div>
          </div>
        </div>
        <div class="pie-right">
          <div class="right-row">
            <div class="row-item">
              <div class="item-one">
                <img class="img"
                     src="@/assets/images/shuju/renfang/house-logo.png"
                     alt />
                <div class="title">房屋总数</div>
              </div>
              <div class="item-two">
                <div class="num">2818</div>
                <div class="unit">户</div>
              </div>

            </div>

            <div class="row-item marginleft10">
              <div class="item-one">
                <img class="img"
                     src="@/assets/images/shuju/renfang/house-logo.png"
                     alt />
                <div class="title">自住房屋</div>
              </div>
              <div class="item-two">
                <div class="num">2642</div>
                <div class="unit">户</div>
              </div>

            </div>
          </div>
          <div class="right-row margintop18">
            <div class="row-item">
              <div class="item-one">
                <img class="img"
                     src="@/assets/images/shuju/renfang/house-logo.png"
                     alt />
                <div class="title">出租房屋</div>
              </div>
              <div class="item-two">
                <div class="num">818</div>
                <div class="unit">户</div>
              </div>

            </div>

            <div class="row-item marginleft10">
              <div class="item-one">
                <img class="img"
                     src="@/assets/images/shuju/renfang/house-logo.png"
                     alt />
                <div class="title">闲置房屋</div>
              </div>
              <div class="item-two">
                <div class="num">316</div>
                <div class="unit">户</div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="g-bar">
        <div class="bar-title">

          <img class="title_img"
               src="@/assets/images/index/list-logo.png"
               alt />
          <div class="tip_title">近一年房屋状态变化趋势图</div>
          <div class="title_line"></div>

        </div>
        <div class="bar-legend">
          <div class="item-logo logo1"></div>
          <div class="item-name">自住房屋</div>
          <div class="item-logo logo2 marginleft10"></div>
          <div class="item-name">出租房屋</div>
          <div class="item-logo logo3 marginleft10"></div>
          <div class="item-name">闲置房屋</div>
        </div>
        <div class="bar-main">
          <screen-echarts-frame class=""
                                @myChartMethod="barInitOk"
                                ref="barChart"></screen-echarts-frame>
        </div>

      </div>

      <!-- <screen-nodata class="nodata"
                     v-if="showNoData"></screen-nodata> -->
    </div>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import screenEchartsFrame from "@/views/dataBoard/cpts/screen-echarts-frame/index";
import { pieOption } from './fwPieOption.js'
import { barOption } from './fwBarOption.js'

export default {
  props: {
    orgId: {
      type: String,
      default: "",
    },
  },
  components: {
    screenEchartsFrame
  },
  // mixins: [animate]
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
  },
  data () {
    return {
      showNoData: false,
      timer: null,
      barChart: '',
      pieChart: '',
      pieOption: {},
      barOption: {},
      pieInitState: false,
      barInitState: false,
      pieData: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    pieInitOk () {

      this.pieInitState = true
    },
    barInitOk () {
      this.barInitState = true
    },
    getData () {
      this.getBar()
      this.getPie()
    },
    getBar () {
      if (this.barInitState) {
        this.getBarChart()
      } else {
        setTimeout(() => {
          this.getBar()
        }, 500)
      }
    },
    getPie () {
      if (this.pieInitState) {
        this.getPieChart()
      } else {
        setTimeout(() => {
          this.getPie()
        }, 500)
      }
    },
    // 获取饼状图
    async getPieChart () {

      this.$refs.pieChart.clear()
      // this.$refs.pieChart.showLoading()

      // 获取pieChart配置
      this.pieOption = pieOption()

      // 设置三个配置值
      this.pieOption.title.text = '73%'
      this.pieData = [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' }
      ]
      this.pieOption.series[0].data = this.pieData;
      // this.$refs.pieChart.hideLoading()
      this.$refs.pieChart.setOption(this.pieOption)
    },

    // 获取饼状图
    async getBarChart () {
      this.showNoData = false
      this.$refs.barChart.clear()
      // this.$refs.barChart.showLoading()


      // this.$refs.barChart.hideLoading()
      let xaxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let series = [
        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] },
        { data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90] }
      ]

      // if (res.data.xaxis && res.data.xaxis.length > 0) {
      //   const {
      //     xaxis,
      //     totalIndexData,
      //     serviceAbilityData,
      //     partyDevAbilityData,
      //     governAbilityData
      //   } = res.data

      //   this.barOption = barOption()
      //   this.$refs.barChart.hideLoading()
      //   this.$refs.barChart.setOption(this.barOption, true)
      //   this.$refs.barChart.setOption({
      //     xAxis: { data: xaxis },
      //     series: [
      //       { data: totalIndexData },
      //       { data: partyDevAbilityData },
      //       { data: governAbilityData },
      //       { data: serviceAbilityData }
      //     ]
      //   }, true)
      // } else {
      //   this.showNoData = true
      // }

      this.barOption = barOption()
      // this.$refs.barChart.hideLoading()
      this.$refs.barChart.setOption(this.barOption, true)
      this.$refs.barChart.setOption({
        xAxis: { data: xaxis },
        series: series
      }, true)
    }

  }
};
</script>

<style lang="scss" scoped>
.fwgl-main {
  height: 100%;
  width: 100%;

  .g-pie {
    margin-top: 24px;
    display: flex;
    justify-content: space-around;

    .pie-left {
      height: 120px;
      flex: 0 0 120px;
    }

    .pie-legend {
      .item {
        display: flex;
        margin-bottom: 12px;
      }
    }
    .pie-right {
      .right-row {
        display: flex;
        // justify-content: space-between;

        .row-item {
          flex: 0 0 100px;
          .item-one {
            display: flex;
            .img {
              width: 15px;
              height: 15px;
            }
            .title {
              margin-left: 9px;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(255, 255, 255, 0.65);
            }
          }

          .item-two {
            margin-top: 8px;
            display: flex;
            align-items: flex-end;
            margin-left: 23px;

            .num {
              font-size: 24px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
            }

            .unit {
              margin-left: 9px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
            }
          }
        }
      }
    }
  }

  .g-bar {
    position: relative;
    margin-top: 14px;

    .bar-title {
      display: flex;
      align-items: center;
      // margin-left: 24px;

      .title_img {
        width: 17px;
        height: 17px;
      }
      .tip_title {
        margin-left: 8px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 22px;
      }

      .title_line {
        margin-left: 8px;
        width: 244px;
        height: 1px;
        background: linear-gradient(
          270deg,
          rgba(55, 198, 255, 0.1) 0%,
          #1995ff 100%
        );
      }
    }

    .bar-legend {
      position: absolute;
      top: 37px;
      right: 20px;
      display: flex;
    }

    .bar-main {
      margin-top: 10px;
      height: 225px;
    }
  }
}

.item-name {
  margin-left: 8px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #8c8c8c;
}

.item-logo {
  margin-top: 2px;
  width: 8px;
  height: 8px;
}

.logo1 {
  background: #6fdeff;
}
.logo2 {
  background: #ffaa00;
}
.logo3 {
  background: #1a95ff;
}
.marginleft10 {
  margin-left: 10px;
}

.margintop18 {
  margin-top: 18px;
}
</style>