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="content">
        <div style="clear: both;">
          <div class="previous-border-class" v-for="item in dataBoxData" :key="item.index">
            <div class="previous-style-padding">
              <div class="justify-div-position">
                <div class="previous-style-circle" :style="{borderColor:item.color}"></div>
                <div class="previous-style-font1">{{$t(item.title)}}</div>
                <el-tooltip effect="dark" placement="top-start" style="margin-top: 3px">
                  <div slot="content" style="white-space: pre">
                    {{
                      $t(
                          item.description
                      )
                    }}
                  </div>
                  <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
                  <img
                      width="14px"
                      height="14px"
                      src="../../../assets/icons/prompt_icon.svg"
                  />
                </el-tooltip>
              </div>
              <div class="previous-style-font2">
                <div v-if="item.title1">
                  <span class="font-color-style-gray previous-style-font4 previous-right-5">{{$t(item.title1)}}</span>
                  <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value1}}</span>
                  <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit1)}}</span>
                  <span class="font-color-style-gray previous-style-font4 previous-left-26 previous-right-5">{{$t(item.title2)}}</span>
                  <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value2}}</span>
                  <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit2)}}</span>
                </div>
                <div v-else>
                  <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value}}</span>
                  <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit)}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template slot="charts">
        <div style="clear: both;">
          <div ref="chartRef" style="height: 220px;">
          </div>
        </div>
      </template>
    </boxBorder>
  </div>
</template>

<script>
import boxBorder from './boxBorder'
import {Column} from "@antv/g2plot";
export default {
  name: "futureTwelveMonths",
  props:['dataBoxData'],
  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)*100)/100,
            "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)*100)/100,
            "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 = 352
      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) =>{
              console.log(datum.value)
              return '¥' + this.tool.formatAmount(datum.value,2)
            }
          },
          tooltip: {
            formatter: (datum) => {
              console.log(datum.value)
              return {
                name:datum.name,
                value:'¥' + this.tool.formatAmount(datum.value,2)
              }
            }
          },
          interactions: [{ type: 'element-highlight-by-x' }],
        });
        this.chartMap.on('element:click',(evt) => {
          this.$emit('clickChart',evt.data.data.signdate_due)
        })
        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>
.previous-border-class{
  width: 28%;
  height: 68px;
  float: left;
  margin-right: 40px;
}
.previous-style-padding{
  padding: 10px 20px;
}
.previous-style-circle{
  width: 5px;
  height: 5px;
  background: #FFFFFF;
  border: 2px solid;
  line-height: 19px;
  border-radius: 8px;
  margin-top: 5px;
  margin-right: 5px;
}
.previous-style-font1{
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-right: 5px;
}
.previous-style-font2{
  margin-top: 5px;
  margin-left: 15px;
}
.previous-style-font3{
  font-size: 18px;
}
.previous-style-font4{
  font-size: 14px;
}
.previous-right-5{
  margin-right: 5px;
}
.previous-left-26{
  margin-left: 26px;
}
</style>