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

<template>
  <div class="modelBlock">
    <div class="model-title">
      <div class="model-title-text">押金余额分析</div>
      <div class="model-title-right">
        <el-select
          v-model="mixins_query.depositType"
          placeholder="押金类型"
          clearable
          class="saveColumn-select"
          @change="getData"
        >
          <el-option
            label="装修押金"
            :value="1"
          ></el-option>
          <el-option
            label="租赁押金"
            :value="2"
          ></el-option>
        </el-select>
        <el-date-picker
          value-format="yyyy"
          v-model="date"
          type="year"
          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 { columnOptionsChartName } from './indexOptionChart.js';
import allcommunit from './allcommunit';
export default {
  mixins: [allcommunit],
  data () {
    return {
      mixins_query: {
        communityId: '',
        depositType: '',
        year: ''
      },
      date: '',
      clientOptions: columnOptionsChartName(
        '(元)',
        ['应收', '已收', '已退', '余额'],
        [
          {
            name: '应收',
            data: 0
          },
          {
            name: '已收',
            data: 0
          },
          {
            name: '已退',
            data: 0
          },
          {
            name: '余额',
            data: 0
          }
        ],
        [],
        10
      )
    };
  },

  mounted () { },
  computed: {},
  methods: {
    getData () {
      this.$http
        .get('/sc-charge/deposit/statistics/balance', this.mixins_query)
        .then(({ status, data, msg }) => {
          if (status == 0 && !!data) {
            this.clientOptions = columnOptionsChartName(
              '(元)',
              ['应收', '已收', '已退', '余额'],
              [
                {
                  name: '应收',
                  data: data.amount || 0
                },
                {
                  name: '已收',
                  data: data.paymentAmount || 0
                },
                {
                  name: '已退',
                  data: data.refundAmount || 0
                },
                {
                  name: '余额',
                  // data: data.balance || 0
                  data: (data.paymentAmount - data.refundAmount) || 0
                }
              ],
              [],
              10
            );
          } else {
            this.clientOptions = columnOptionsChartName(
              '(元)',
              ['应收', '已收', '已退', '余额'],
              [
                {
                  name: '应收',
                  data: 0
                },
                {
                  name: '已收',
                  data: 0
                },
                {
                  name: '已退',
                  data: 0
                },
                {
                  name: '余额',
                  data: 0
                }
              ],
              [],
              10
            );
          }
        })
        .catch((err) => { });
    },
    eachartObj (data) {
      this.total = data.total;
      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]
        });
      }
      return newData;
    },
    changeTime (v) {
      this.mixins_query.year = v;
      this.getData();
    }
  },
  created () {
    this.date = this.$moment().format('YYYY');
    this.mixins_query.year = this.$moment().format('YYYY');
  }
};
</script>
<style scoped lang="scss">
@import './style.scss';
</style>