abb-antd/src/views/mobile/AnalysisLiquidate.vue

<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24" type="flex">
      <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card title="清收任务分析" :style="{padding: '0px',marginBottom:'0px'}">
          <a-card
            title="年度累计完成额"
            :style="{ marginTop: '0px'}">
            <div
              style="cursor: pointer"
              @click="jumpClick()">
              <h2>{{ newAmountTaskYearlyAmount }}</h2>
              <trend style="margin-right: 16px;" :flag="'no'">
                <span slot="term"><badge text="任务" status="success"/></span>
                {{ BaseTool.Amount.defaultDivTenThousandFormatter(newAmountTaskYearly.newAmount) }}万
              </trend>
              <trend :flag="'no'">
                <span slot="term"><badge text="完成率" status="error"/></span>
                {{ BaseTool.Amount.default(newAmountTaskYearly.ratio) }}%
              </trend>
            </div>
          </a-card>
          <a-card
            title="本月完成额"
            :style="{ marginTop: '0px' }">

            <div
              style="cursor: pointer"
              @click="jumpClick()">
              <h2>{{ newAmountTaskMonthAmount }}</h2>
              <trend style="margin-right: 16px;" :flag="'no'">
                <span slot="term"><badge text="任务" status="success"/></span>
                {{ BaseTool.Amount.defaultDivTenThousandFormatter(newAmountTaskMonth.newAmount) }}万
              </trend>
              <trend :flag="'no'">
                <span slot="term"><badge text="完成率" status="error"/></span>
                {{ BaseTool.Amount.default(newAmountTaskMonth.ratio) }}%
              </trend>
            </div>
          </a-card>
        </a-card>
      </a-col>
      <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card
          :loading="loading"
          :bordered="false"
          :body-style="{padding: '0'}"
        >
          <div class="salesCard">
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
              <a-tab-pane loading="true" tab="清收任务完成统计（任务+完成）" key="1">
                <a-row>
                  <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                    <label style="padding-left: 10px">年份区间：</label>
                    <a-select placeholder="开始年份" v-model="startYear" style="width: 35%">
                      <a-select-option
                        v-for="(value,index) in years"
                        :key="index"
                        :label="value"
                        :value="value">{{ value }}</a-select-option>
                    </a-select>
                    ～
                    <a-select placeholder="结束年份" v-model="endYear" style="width: 35%">
                      <a-select-option
                        v-for="(value,index) in years"
                        :key="index"
                        :label="value"
                        :value="value">{{ value }}</a-select-option>
                    </a-select>
                  </a-col>
                  <a-col
                    :xl="24"
                    :lg="24"
                    :md="24"
                    :sm="24"
                    :xs="24"
                    style="margin-top: 10px">
                    <label style="padding-left: 10px">统计维度：</label>
                    <a-select placeholder="请选择" v-model="type" style="width: 20%">
                      <a-select-option
                        v-for="(label,value) in yearlyTaskTypeDict"
                        :key="value"
                        :label="label"
                        :value="parseInt(value)">{{ label }}
                      </a-select-option>
                    </a-select>
                    <a-button type="primary" @click="taskAnalysis()" style="margin-left:10px;margin-right: 15px">查询</a-button>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col class="chart_col">
                    <div>
                      <h4 style="margin-bottom: 20px; margin-left: 20px; display: inline-block">清收任务统计</h4>
                      <h4 class="chart_wy_h4">万元</h4>
                      <v-chart
                        class="chart"
                        :forceFit="true"
                        :height="height"
                        :data="newAmountDatas1"
                        :scale="scale1"
                        :padding="['auto', '50', '80', '100']">
                        <v-tooltip />
                        <v-legend
                          :custom="legendCustom"
                          :allow-all-canceled="legendAllowAllCanceled"
                          :items="legendItems1"
                          :on-click="legendOnClick"
                        />
                        <v-axis
                          data-key="ratio"
                          :grid="axisGrid"
                          position="right"
                          :label="axisLabel"
                        />
                        <v-bar position="targetName*amount" color="name" :adjust="adjust"/>

                        <v-smooth-line position="targetName*ratio" color="#e6b600" :size="gemoSize" />
                        <v-point shape="circle" position="targetName*ratio" color="#e6b600" :size="gemoSize" />
                      </v-chart>
                    </div>
                  </a-col>

                </a-row>
                <a-row>
                  <a-col class="chart_col">
                    <div>
                      <h4 style="margin-bottom: 20px; margin-left: 20px; display: inline-block">累计清收任务统计</h4>
                      <h4 class="chart_wy_h4">万元</h4>
                      <v-chart
                        class="chart"
                        :forceFit="true"
                        :height="height"
                        :data="newAmountDatas2"
                        :scale="scale2"
                        :padding="['auto', '50', '80', '100']">
                        <v-tooltip />
                        <v-legend
                          :custom="legendCustom"
                          :allow-all-canceled="legendAllowAllCanceled"
                          :items="legendItems2"
                          :on-click="legendOnClick"
                        />
                        <v-axis
                          data-key="ratio"
                          :grid="axisGrid"
                          position="right"
                          :label="axisLabel"
                        />
                        <v-bar position="targetName*amount" color="name" :adjust="adjust"/>
                        <v-smooth-line position="targetName*ratio" color="#e6b600" :size="gemoSize" />
                        <v-point shape="circle" position="targetName*ratio" color="#e6b600" :size="gemoSize" />
                      </v-chart>
                    </div>
                  </a-col>

                </a-row>
                <a-row>
                  <a-col class="chart_col">
                    <div @click="jumpClick()">
                      <h4 style="margin-bottom: 20px; margin-left: 20px; display: inline-block">年度清收任务统计</h4>
                      <h4 class="chart_wy_h4">万元</h4>
                      <v-chart
                        class="chart"
                        :forceFit="true"
                        :height="height"
                        :data="newAmountDatas3"
                        :scale="scale3"
                        :padding="['auto', '50', '80', '100']">
                        <v-tooltip />
                        <v-legend
                          :custom="legendCustom"
                          :allow-all-canceled="legendAllowAllCanceled"
                          :items="legendItems3"
                          :on-click="legendOnClick"
                        />
                        <v-axis
                          data-key="ratio"
                          :grid="axisGrid"
                          position="right"
                          :label="axisLabel"
                        />
                        <v-bar position="targetName*amount" color="name" :adjust="adjust"/>
                        <v-smooth-line position="targetName*ratio" color="#e6b600" :size="gemoSize" />
                        <v-point shape="circle" position="targetName*ratio" color="#e6b600" :size="gemoSize" />
                      </v-chart>
                    </div>
                  </a-col>

                </a-row>
              </a-tab-pane>

            </a-tabs>
          </div>
        </a-card>
      </a-col>

    </a-row>
  </div>
</template>

<script>
import { ChartCard, MiniArea, MiniBar, MiniProgress, RankList, Bar, Trend, NumberInfo, MiniSmoothArea } from '@/components'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'AnalysisLiquidateNew',
  mixins: [mixinDevice],
  components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  data () {
    return {
      loading: true,

      scale1: [{
        dataKey: 'amount',
        min: 0,
        formatter: function formatter (text) {
          return text
        }
      }, {
        dataKey: 'ratio',
        alias: '完成比例',
        min: 0,
        formatter: function formatter (text) {
          return text + '%'
        }
      }],
      scale2: [{
        dataKey: 'amount',
        min: 0,
        formatter: function formatter (text) {
          return text
        }
      }, {
        dataKey: 'ratio',
        alias: '累计完成比例',
        min: 0,
        formatter: function formatter (text) {
          return text + '%'
        }
      }],
      scale3: [{
        dataKey: 'amount',
        min: 0,
        formatter: function formatter (text) {
          return text
        }
      }, {
        dataKey: 'ratio',
        alias: '年度完成比例',
        min: 0,
        formatter: function formatter (text) {
          return text + '%'
        }
      }],

      height: 400,

      axisLabel: {
        textStyle: {
          fill: '#fdae6b'
        }
      },
      axisGrid: null,

      gemoSize: 3,
      adjust: [{
        type: 'dodge',
        marginRatio: 1 / 32
      }],

      legendCustom: true,
      legendAllowAllCanceled: true,
      legendItems1: [
        { value: '任务额', marker: { symbol: 'square', fill: '#38A0FF', radius: 5 } },
        { value: '完成额', marker: { symbol: 'square', fill: '#4CCA73', radius: 5 } },
        { value: '完成比例', marker: { symbol: 'hyphen', stroke: '#e6b600', radius: 5, lineWidth: 3 } }
      ],
      legendItems2: [
        { value: '累计任务额', marker: { symbol: 'square', fill: '#38A0FF', radius: 5 } },
        { value: '累计完成额', marker: { symbol: 'square', fill: '#4CCA73', radius: 5 } },
        { value: '完成比例', marker: { symbol: 'hyphen', stroke: '#e6b600', radius: 5, lineWidth: 3 } }
      ],
      legendItems3: [
        { value: '年度任务额', marker: { symbol: 'square', fill: '#38A0FF', radius: 5 } },
        { value: '完成额', marker: { symbol: 'square', fill: '#4CCA73', radius: 5 } },
        { value: '完成比例', marker: { symbol: 'hyphen', stroke: '#e6b600', radius: 5, lineWidth: 3 } }
      ],
      legendOnClick: (ev, chart) => {
        const item = ev.item
        const value = item.value
        const checked = ev.checked
        const geoms = chart.getAllGeoms()
        for (let i = 0; i < geoms.length; i++) {
          const geom = geoms[i]
          if (geom.getYScale().field === value) {
            if (checked) {
              geom.show()
            } else {
              geom.hide()
            }
          }
        }
      },

      yearlyTaskTypeDict: {},
      newAmountTaskYearly: {
        amount: 0,
        newAmount: 0,
        ratio: 0
      },
      newAmountTaskMonth: {
        amount: 0,
        newAmount: 0,
        ratio: 0
      },
      type: 3,
      year: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      month: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_MONTH)),
      newAmountDatas2: [],
      newAmountDatas1: [],
      newAmountDatas3: [],
      startYear: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      endYear: parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR)),
      years: []

    }
  },
  created () {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.yearlyTaskTypeDict = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.YEARLY_TASK_TYPE)

    this.taskAnalysis()
    this.init()
  },
  computed: {
    newAmountTaskYearlyAmount: function () {
      return `￥${this.BaseTool.Amount.defaultDivTenThousandFormatter(this.newAmountTaskYearly.amount)}万`
    },
    newAmountTaskMonthAmount: function () {
      return `￥${this.BaseTool.Amount.defaultDivTenThousandFormatter(this.newAmountTaskMonth.amount)}万`
    }
  },
  methods: {
    taskAnalysis () {
      this.newAmountDatas1 = []
      this.newAmountDatas2 = []
      this.newAmountDatas3 = []
    },
    getTargetName (item) {
      return ((this.startYear === this.endYear || this.type === 1) ? '' : (item.year + '年')) + item.targetName + this.yearlyTaskTypeDict[item.type]
    },
    init () {
      const year = parseInt(this.BaseTool.Moment().format(this.BaseTool.Date.PICKER_NORM_YEAR))
      const years = []
      for (let i = year + 1; i >= 2018; i--) {
        years.push(i)
      }
      this.years = years
    },
    jumpClick () {
      return false
      // this.$router.push({ path: '/invest/loan/liquidate' })
    }
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
  .chart_wy_h4 {
    float: right;
    margin-bottom: 20px;
    margin-right: 10px;
    display: inline-block
  }
  @media screen and (max-width: 500px) {
    .chart_col {
      width: 110%;
    }
    .chart{
      position: relative;
      left: -45px;
    }
    .chart_wy_h4{
      float: right;
      margin-bottom: 20px;
      margin-right:11%;
      display: inline-block
    }
  }
</style>