SmartCommunity/operationSupport/src/views/newWorkBench/components/rentalAndSaleRate.vue

<template>
  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
    <template v-if="permissionFiltering">
      <div class="model-title">
        <div class="model-title-text">房屋租售率</div>
      </div>
      <div class="model-content">
        <zz-echart
          :option="clientOptions"
          class="chart"
        ></zz-echart>
        <div class="totals">
          <span>{{ total }}</span>
          <span class="numbers">房屋总数</span>
        </div>
      </div>
    </template>
    <no-permission
      v-else
      tipsText="房屋租售率"
    ></no-permission>
  </div>
</template>
<script>
import { ringType, ringTypeEnlarge } from './indexOptionChart';
import permissionComponent from './permissionComponent';
let defaultTitle = {
  text: `{a|租售率}`,
  left: 'center',
  top: '35%',
  left: '18%',
  subtextStyle: {
    rich: {
      b: {
        fontSize: 20,
        color: '#fff'
      }
    }
  },
  textStyle: {
    color: '#ccc',
    rich: {
      a: {
        fontSize: 12,
        color: '#858892',
        padding: [0, 0, 0, 3]
      }
    }
  }
};

let defaultTitleEnlarge = {
  text: `{a|租售率}`,
  left: 'center',
  top: '40%',
  left: '19%',
  subtextStyle: {
    rich: {
      b: {
        fontSize: 20,
        color: '#fff'
      }
    }
  },
  textStyle: {
    color: '#ccc',
    rich: {
      a: {
        fontSize: 14,
        color: '#858892',
        padding: [0, 0, 0, 3]
      }
    }
  }
};
export default {
  mixins: [permissionComponent],
  data () {
    return {
      valueClass: '',
      mixins_query: {
        communityId: ''
      },
      defaultModel: {
        permissUrl: '11',
        titleName: '房产管理'
      },
      total: 0,
      defaultTitle: {
        text: `{a|租售率}`,
        left: 'center',
        top: '35%',
        left: '18%',
        subtextStyle: {
          rich: {
            b: {
              fontSize: 20,
              color: '#fff'
            }
          }
        },
        textStyle: {
          color: '#ccc',
          rich: {
            a: {
              fontSize: 12,
              color: '#858892',
              padding: [0, 0, 0, 3]
            }
          }
        }
      },
      clientOptions: ringType(
        [],
        [
          { name: '待租售', value: 0 },
          { name: '已售', value: 0 },
          { name: '已租', value: 0 }
        ],
        { subtext: `{b|0%}`, ...defaultTitle }
      )
    };
  },
  methods: {
    getData () {
      this.$http.get('/sc-community/statisticsaleRate', this.mixins_query).then(({ data, msg, status }) => {
        if (status == 0) {
          if (window.screen.width == 1920 || window.screen.width < 1920) {
            this.clientOptions = ringType([], this.eachartObj(data), {
              subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
              ...defaultTitle
            });
          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
            this.clientOptions = ringTypeEnlarge([], this.eachartObj(data), {
              subtext: `{b|${parseInt(((data.datas[1] + data.datas[2]) / data.total).toFixed(2) * 100) || 0 * 100}%}`,
              ...defaultTitleEnlarge
            });
          }
        }
      });
    },
    eachartObj (data) {
      this.total = data.total;
      let typeName = {
        0: '待租售',
        1: '已售',
        2: '已租'
      };
      let newData = [];
      for (let a in data.datas) {
        newData.push({
          value: data.datas[a],
          name: typeName[a]
        });
      }
      return newData;
    }
  },
  created () {
    // this.mixins_query.date = this.$moment().format('YYYY');
    if (window.screen.width == 1920 || window.screen.width < 1920) {
      this.valueClass = 1;
      this.clientOptions = ringType([],
        [
          { name: '待租售', value: 0 },
          { name: '已售', value: 0 },
          { name: '已租', value: 0 }
        ],
        { subtext: `{b|0%}`, ...defaultTitle })
    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
      this.valueClass = 2;
      this.clientOptions = ringTypeEnlarge([],
        [
          { name: '待租售', value: 0 },
          { name: '已售', value: 0 },
          { name: '已租', value: 0 }
        ],
        { subtext: `{b|0%}`, ...defaultTitleEnlarge });
    }
    this.getData();
  }
};
</script>
<style scoped lang="scss">
@import './style.scss';
@import './stylePc.scss';
</style>