yos_web/src/views/mediaStatistics/modules/futureTwelveMonths.vue

<template>
  <div>
    <boxBorder title="未来12月项目预计签约金额/预计成交金额分析" class1="20px 20px" :height="height + 'px'" :titleTip="true">
      <template slot="select">
        <div>
          <label class="search__label">{{$t(`项目阶段`)}}：</label>
          <el-select ref="selectRef" v-model="stagename" multiple :placeholder="$t(`请选择`)"  size="small" @focus="getStage" @change="selectStage"  filterable >
            <el-option
                v-for="item in stagenameList"
                :key="item.stagename"
                :label="item.stagename"
                :value="item.stagename">
            </el-option>
          </el-select>
        </div>
      </template>
      <template slot="charts">
        <div ref="chartRef" style="height: 220px;">
        </div>
      </template>
    </boxBorder>
  </div>
</template>

<script>
import boxBorder from './boxBorder'
import {Column} from "@antv/g2plot";
export default {
  name: "futureTwelveMonths",
  components:{
    boxBorder
  },
  data(){
    return {
      chartMap:[],
      chartMapData:[],
      stagename:[],
      stagenameList:[],
      selectHeight:null,
      height:282
    }
  },
  methods:{
    chartData(init,data){
      let index = 0
      let indexNew = 0
      data.forEach((item,num) =>{
        if (num == index){
          this.chartMapData[indexNew] = {
            "signdate_due":item.signdate_due,
            "value":Math.round(this.tool.unitConversion(item.signamount_due,10000)),
            "name":this.$t('预计签约金额')+ this.$t('(万)')
          }
          indexNew = indexNew + 1
          this.chartMapData[indexNew] = {
            "signdate_due":item.signdate_due,
            "value":Math.round(this.tool.unitConversion(item.dealamount_due,10000)),
            "name":this.$t('预计成交金额') + this.$t('(万)')
          }
          indexNew = indexNew + 1
          index = index + 1
        }
      })
      console.log(this.chartMapData,'chartMapData')
      console.log(this.$refs.selectRef.$el.clientHeight,'高度&&&&&&&高度')
      this.height = 282
      this.height = this.height + (this.$refs.selectRef.$el.clientHeight -32)
      if (init){
        this.chartMap = new Column(this.$refs.chartRef,{
          color:['#3874F6','#F29C37'],
          data:this.chartMapData,
          isGroup: true,
          xField: 'signdate_due',
          yField: 'value',
          seriesField: 'name',
          /** 设置颜色 */
          //color: ['#1ca9e6', '#f88c24'],
          /** 设置间距 */
          // marginRatio: 0.1,
          label: {
            // 可手动配置 label 数据标签位置
            position: 'top', // 'top', 'middle', 'bottom'
            offsetY:12,
            // 可配置附加的布局方法
            layout: [
              // 数据标签防遮挡
              { type: 'interval-hide-overlap' },
            ],
            style: {
              fill: '#444444',
              opacity: 0.9,
              fontSize:12
            },
            formatter: (datum) =>{
              return '¥' + this.tool.formatAmount(datum.value,0)
            }
          },
          tooltip: {
            formatter: (datum) => {
              return {
                name:datum.name,
                value:'¥' + this.tool.formatAmount(datum.value,0)
              }
            }
          }
        });
        this.chartMap.render()
      }else {
        this.chartMap.changeData(this.chartMapData)
      }
    },
    /*获取项目阶段*/
    async getStage(){
      if (this.stagenameList.length == 0){
        const res = await this.$api.requested({
          "id": 20221128143604,
          "content": {
            "pageNumber": 1,
            "pageSize": 99,
            "where": {
              "condition": "",
              "allprojecttype":"",
              "projecttype":""
            }
          }
        })
        this.stagenameList = res.data
      }
    },
    selectStage(){
      console.log(this.stagename,'阶段名称')
      this.$emit('selectStage',this.stagename)

    },
  },
}
</script>

<style scoped>

</style>