SmartCommunity/commandCenter/src/views/financialAnalysis/smallModuleIndex/incomeMode.vue

<template>
  <div :class="valueClass == 1 ? 'modelBlock' : 'modelBlock enlarge'">
    <div class="model-title">
      <div class="model-title-text">收入方式</div>
      <div class="model-title-right">
        <el-select
          v-model="mixins_query.chargeType"
          placeholder="所有费用"
          clearable
          class="saveColumn-select"
          @change="getData"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in $publicArray.chargeType()"
            :key="index"
          ></el-option>
        </el-select>
        <el-date-picker
          value-format="yyyy-MM"
          v-model="date"
          type="month"
          placeholder="选择月"
          class="saveColumn-select saveColumn-select-time"
          @change="changeTime"
          :clearable="false"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="model-content">
      <zz-echart
        :option="clientOptions"
        class="chart"
      ></zz-echart>
    </div>
  </div>
</template>
<script>
import { GradualChange, ringTypes, ringTypeEnlarges } from './indexOptionChart';
const colors = [
  GradualChange('#22D8FF', '#00B2FF'),
  GradualChange('#F0646C', '#F4994E'),
  GradualChange('#5EEDCC ', '#24C3F1'),
  GradualChange('#7178FF', '#D2A4FF'),
  GradualChange('#884DD2', '#DF63CC')
];
import allcommunit from './allcommunit';
export default {
  mixins: [allcommunit],
  data () {
    return {
      valueClass: "",
      mixins_query: {
        communityId: '',
        date: '',
        chargeType: ''
      },
      date: '',
      total: 0,
      clientOptions: ringTypes(
        colors,
        [
          { value: 0, name: '微信' },
          { value: 0, name: '支付宝' },
          { value: 0, name: '现金' },
          { value: 0, name: '预存' },
          { value: 0, name: '其他' }
        ],
        {},
        { type: '%', total: 0 },
        30
      )
    };
  },
  methods: {
    getData () {
      this.$http.get('/sc-community/statisticIncomeMethod', this.mixins_query).then(({ data, msg, status }) => {
        if (status == 0 && !!data.datas && Object.keys(data.datas).length !== 0) {
          //   this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: '%', total: this.total }, 30);
          if (window.screen.width == 1920 || window.screen.width < 1920) {
            this.clientOptions = ringTypes(colors, this.eachartObj(data), {}, { type: '%', total: this.total });
          } else if (window.screen.width == 2560 || window.screen.width > 1920) {
            this.clientOptions = ringTypeEnlarges(colors, this.eachartObj(data), {}, { type: '%', total: this.total });
          }
        }
      });
    },
    changeTime (v) {
      this.mixins_query.date = v + '-01';
      this.getData();
    },
    eachartObj (data) {
      this.total = data.total || 0;
      let typeName = {
        1: '微信在线',
        2: '支付宝',
        3: '现金',
        4: '预存',
        5: '其他',
        6: '刷卡',
        7: '微信扫码'
      };
      let newData = [];
      for (let a in data.datas) {
        newData.push({
          value: data.datas[a],
          name: typeName[a]
        });
        this.total = this.total + data.datas[a];
      }
      return newData;
    }
  },
  created () {
    if (window.screen.width == 1920 || window.screen.width < 1920) {
      this.valueClass = 1;
      this.clientOptions = ringTypes(
        colors,
        [
          { value: 0, name: '微信' },
          { value: 0, name: '支付宝' },
          { value: 0, name: '现金' },
          { value: 0, name: '预存' },
          { value: 0, name: '其他' }
        ],
        {},
        { type: '%', total: 0 }
      );
    } else if (window.screen.width == 2560 || window.screen.width > 1920) {
      this.valueClass = 2;
      this.clientOptions = ringTypeEnlarges(
        colors,
        [
          { value: 0, name: '微信' },
          { value: 0, name: '支付宝' },
          { value: 0, name: '现金' },
          { value: 0, name: '预存' },
          { value: 0, name: '其他' }
        ],
        {},
        { type: '%', total: 0 }
      );
    }
    this.mixins_query.date = this.$moment().format('YYYY-MM') + '-01';
    this.date = this.$moment().format('YYYY-MM');
  }
};
</script>
<style lang="scss" scoped>
@import './style.scss';
@import './stylePc.scss';
</style>